Bu derste PHP, MySQL, AJAX, jQuery kullanarak tablodan birden çok satırı nasıl sileceğinizi göreceğiz. MySQL veritabanı tablosunun yanı sıra HTML’deki satırları da sileceğiz. Veritabanı tablosundan birden çok satırı silmek için MySQL sorgusunda WHERE koşulu ile IN yan tümcesini kullanacağız.
Kullanıcının silinmek üzere belirli bir satırı seçebilmesi için tablodaki her satıra onay kutusu koyacağız. Ayrıca tablo başlığına bir onay kutusu koyacağız ve bu onay kutusunu seçerek tablodaki tüm satırlar silinmek üzere seçilecektir.
Onay kutusunu işaretlemek veya işaretlemek için jQuery kullanıyoruz. Kullanıcı tablodaki satırlar için tüm onay kutularını manuel olarak seçerse, tablo üstbilgisindeki onay kutusu, tablo gövdesindeki tüm onay kutularının işaretli olduğunu göstermek için otomatik olarak işaretlenir. Tablo gövdesindeki onay kutularından herhangi birinin işareti kaldırılırsa, başlık onay kutusunun işareti otomatik olarak kaldırılır.
MySQL Tablosu
Verileri MySQL veritabanından devredeceğimiz için bunun için bir tabloya ihtiyacımız var. Bu yüzden ticaret veritabanı altında ürün adı verilen bir tablo oluşturacağız.
Uygulamamızı test etmek için bazı veriler de ekleyeceğiz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | CREATE TABLE `urunler` ( `uno` int(11) NOT NULL, `uadi` varchar(25) COLLATE utf8_turkish_ci DEFAULT NULL, `fiyat` float DEFAULT NULL, `miktar` int(11) DEFAULT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_turkish_ci; -- -- Tablo döküm verisi `urun` -- INSERT INTO `urunler` (`uno`, `uadi`, `fiyat`, `miktar`) VALUES (1, 'elma', 5, 199999), (2, 'armut', 5, 199999), (3, 'muz', 5, 199999), (4, 'pırasa', 3, 199999), (5, 'domates', 4, 199999), (6, 'patates', 3, 199999), (7, 'mandalina', 4, 199999), (8, 'portakal', 8, 199999), (9, 'limon', 7, 199999), (10, 'Seftali', 6, 199999), (11, 'Kiraz', 9, 199999), (12, 'Uzun', 6, 199999), (13, 'patlıcan', 3, 199999), (14, 'dut', 6, 199999), (15, 'ayva', 10, 199999); |
Proje Oluştur
Windows sisteminde Apache, PHP ve MySQL kurulumuna sahip olduğunuz varsayılmaktadır.
Şimdi Apache sunucusunun htdocs klasörü altında php-ajax-jquery-multiple-row-delete adlı bir proje kök dizini oluşturacağız.
Sonraki bölümlerde proje kök dizininden bahsetmeyebiliriz ve proje kök diziniyle ilgili konuştuğumuzu varsayacağız.
Veritabanı Yapılandırmaları
MySQL veritabanından veri seçme, MySQL veritabanından veri silme gibi çeşitli veritabanı işlemleri için db.php dosyası oluşturun.
Lütfen veritabanı kimlik bilgilerini veritabanınıza göre değiştirmeyi unutmayın.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <?php $dbHost = "localhost"; $dbUsername = "root"; //db kullanıcı adı $dbPassword = "";//db şifre $dbName = "ticaret";//db adı $db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName); if ($db->connect_error) { die("Bağlantı hatası: " . $db->connect_error); } |
Tablo Satırlarını Silme
Seçilen satırları MySQL sorgusunda WHERE koşulu ile IN yan tümcesini kullanarak veritabanı tablosundan sileceğiz.
AJAX URL’sinden çağrılacak PHP’de REST API oluşturacağız.
Aşağıdaki REST API, herhangi bir kaynağın yalnızca http yöntemi POST için erişilebilir olmasına izin verir. JSON parametresi, satırları silmek için istek gövdesinde kullanılacaktır.
Aşağıdaki kodla delete.php adlı bir PHP dosyası oluşturuyoruz:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <?php require_once 'db.php'; header("Access-Control-Allow-Origin: *"); header("Access-Control-Allow-Methods: POST"); if ($_SERVER['REQUEST_METHOD'] === 'POST') { // post verisini oku $data = json_decode(file_get_contents("php://input", true)); $sql = "DELETE FROM urunler WHERE uno IN (" . mysqli_real_escape_string($db, $data->uno) . ")"; $result = $db->query($sql); if($result) { echo '<span style="color:green;">Urunler basariyla kaldirildi.</span>'; } else { echo '<span style="color:red;">Silme isleminde bir sorun olustu</span>'; } } |
PHP’de aşağıdaki kodu kullanarak JSON body parametresini alırız.
1 2 3 | file_get_contents("php://input", true) |
Ürün Ayrıntılarını Getirme ve Görüntüleme
Ardından, veritabanı tablosundan satırlar getirip bir HTML tablosunda görüntüleyeceğiz.
Silinecek satırı seçmek için her satıra onay kutusu koyduk. Öte yandan, silinmek üzere tüm satırları seçmek için onay kutusunu masa başlığına koyduk.
Temel stili uyguladık ve silme faaliyetlerini gerçekleştirmek için AJAX isteğini kullanıyoruz.
index.php dosyasına aşağıdaki kodu yazın.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tasarım Kodlama Com</title> <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script> </head> <body> <div> <h1>PHP, AJAX, MYSQL Örnekleri</h1> <div> <?php require_once 'db.php'; $sql = "SELECT * FROM urunler"; $result = $db->query($sql); if($result) { ?> <div id="mesaj"></div> <button id="delete_selected">Silinecek Verileri Seçin</button> <table> <thead> <tr> <th></th> <th>UNO</th> <th>AD</th> <th>FİYAT</th> <th>MİKTAR</th> </tr> </thead> <tbody> <?php while($urun = $result->fetch_assoc()) { ?> <tr> <td><input type="checkbox" name="satir-sec" value="<?php echo $urun['uno'];?>"></td> <td><?php echo $urun['uno']; ?></td> <td><?php echo $urun['uadi']; ?></td> <td><?php echo $urun['fiyat']; ?></td> <td><?php echo $urun['miktar']; ?></td> </tr> <?php } ?> </tbody> </table> <?php } else { echo '<div style="color:red;"><p>Kayıt yok</p></div>'; } ?> </div> </div> <script src="app.js"></script> </body> </html> |
REST API Çağrısı
Şimdi satırları silmek için REST API çağırmak için jQuery ile AJAX kullanın. Ayrıca, satırları seçmek ve onay kutusu değerlerini almak için jQuery kullanırız.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | $("#delete_selected").on("click", function () { var id = ''; var virgul = ''; $("input:checkbox[name='satir-sec']:checked").each(function() { id = id + virgul + this.value; virgul = ','; }); if(id.length > 0) { $.ajax({ type: "POST", url: "http://localhost/php/delete.php", data: JSON.stringify({'uno': id}), dataType: "html", cache: false, success: function(mesaj) { $("#mesaj").html(mesaj); }, error: function(jqXHR, status, error) { $("#mesaj").html("<span style='color:red;'>" + status + " " + error + "</span>"); } }); } else { $("#mesaj").html('<span style="color:red;">You must select at least one product for deletion</span>'); } }); |
Yorum Yap