PHP ve Jquery-sortable ile sürükle bırak sıralama değiştirme.

Merhabalar yazıma hoşgeldiniz,

Bu yazımda sizlere PHP programlama dilinde sürükle bırak yöntemi ile nasıl anlık olarak verilerin sıralamasını değiştirebileceğinizi öğretmeye çalışacağım.

Görünüm olarak alttaki gif görüntüsünü elde edeceğiz. Verilerin sıralaması anlık olarak hem görünürde hem de arka planda yani veritabanı tarafında güncellenmiş olacak.

Proje gereklilikleri 

Proje için bize gerekli olanlar:

1. Sürükle bırak yöntemi ile verileri sıralamak ve verilerin yeni sıralamasını bize dizi olarak vermesi için Jquery Sortable eklentisini kullanacağız ilgili doküman ve linke burdan erişebilirsiniz.
2. Bunun ardından tablo yapımızın bu şekildeki tasarımını elde etmek için de bootstrap kullanıyoruz. Aşağıda zaten kodlar arasında CDN vereceğim, isterseniz kendiniz de local'e indirebilirsiniz size kalmış.

Jquery Sortable nasıl kullanılır

Jquery Sortable bir üst elemanı sortable olarak tanımladığımızda alt elemanlarını hareketli hale getirir , buna örnek olarak bir ul elemanını sortable yaptığımızda bu sefer altındaki <li> elemanları sürüklenebilir olacaktır.
Biz ise burada <tbody> elemanını sortable olarak tanımlayacağız ve bu tanımın ardından altında yani child elemanları <tr> etiketleri sıralanabilir olacak.
Burada sıralanaiblir olan child elemanlarının id özelliinine bir belirleyici isim ve yanına -(tre) işareti koymanız ve - işaretinden sonra  elemanın hangi eleman olduğunu belirlemek için bir sayı yazmanız gerekmekte , biz projemizde bu sayı olarak verinin veritabanındaki id değerini kullanacağız.
Örnek:   id = "herşeyyazabilirsiniz-idnumarasi"  => id="sira-1"

Head Tagları arasına yazacağımız stil linkleri.

<!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    

Çağıracağımız script dosyaları

 <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Veritabanı bağlantı kodumuz

<?php

try{
    $db = new PDO("mysql:host=localhost;dbname=category;charset=utf8","root","");
}
catch (PDOException $ex){
    echo $ex->getMessage();
}

Body etiketimiz içerisine yazacağımız tablo kodları

 <div class="container">
        <div class="row">
            <table class="table table-warning table-striped">
                <thead>
                    <tr>
                        <th scope="col">Kategori Adı</th>
                        <th scope="col">Sıra</th>
                    </tr>
                </thead>
<?php
// Kategorileri bir diziye alıyoruz.
$rows = $db->query("Select * from categories order by sira asc")->fetchAll(PDO::FETCH_ASSOC);
?>
                <tbody id="sortable">
                    <?php
                     // Aldığımız kateogirileri burada tabloya dolduruyoruz.
                    foreach ($rows as $row) {
                    ?>
                         /* Her biri tr elemanı tbody'yi sortable olarak seçtiğimizde
                         sürüklenebilir olacağından tr elemanlarına bir id değeri veriyoruz ancak veriğimiz id değeri ismi önemsiz isminden sonraki - işaretinin bitişiğine veritabanındaki id alanını yazdırıyoruz , jquery sortable otomatik olarak o id'ye göre işlem yapacak /*
                        <tr id="sira-<?= $row['id'] ?>">
                            <td><?= $row['category_name'] ?></td>
                            <td><?= $row['sira'] + 1 ?></td>
                        </tr>
                    <?php  } ?>
                </tbody>
            </table>
        </div>
    </div>

Bu işlemlerin ardından tbody elemanımızı sortable hale getirmek için aşağıdaki kodu yazıyoruz.
 

  $('#sortable').sortable({
            // axis özelliği hareketin hangi koordinatta olacağını belirler.
            axis: "y",
            // containment hareketin sınırını belirler 
            containment: "parent",
            // Taşıma hareketi olurken mouse imlecini pointer yapıyoruz.
            cursor: "pointer",
            /*Taşıma işlemi bittikten sonra update fonksiyonu çalışır, biz de gerekli kodları yazıyoruz.
Burada siralama değişkeni bize serialize ile verileri bir dizi ve karşılarında hangi id olduğunu veriyor. */
            update: function(event, ui) {
                var siralama = $(this).sortable("serialize");
               /* Sıralama güncelle diye bir fonksiyon yazdık bu fonksiyon aşağıda, parametre olarak sortable eklentisinin bize verdiği diziyi yolluyoruz*/
                siralamaGuncelle(siralama);
                siralamaTextUpdate();
            }
        });

Tablomuzun en sağında bulunan alanların sıralamasını anlık olarak güncellemek için aşağıdaki fonksiyonu yazıyoruz.

Bu fonksiyon her <tr> elemanın içindeki son <td> elemanın içindeki veriyi index numarasına göre değiştirir, index numaraları 0'dan başladığı için +1 ekliyoruz.

  // Tabloda bulunan sıralama satırlarının da güncellenmesi için bu fonksiyonu kullanıyoruz.
        function siralamaTextUpdate(){
            $("#sortable tr").each(function(index){
                $(this).find("td:last-child").html(index+1);
            })
        }

Sıralama günceleleme fonksiyonu

Bu fonksiyon ajax ile arka plana bizim sortable serialize sayesinde aldığımız diziyi yolluyor, ve gerekli veritabanı işlemleri için hazır hale getiriyor. 

// Sıralama güncelle fonksiyonu
        function siralamaGuncelle(data) {
            $.ajax({
                url: "sortable.php",
                method: "POST",
                data: data,
                success: function(sonuc) {}
            })
        }

Sortable.php dosyamızda bulunan veritabanı güncelleme kodları

// Post var mı diye kontrol ediyoruz.
if ($_POST) {
    /* Ön planda <tr> elemanlarına verdiğimiz id değerinde sira-1 sira-2 gibi bir yapı yaptığımız için 
    sıra bizim dizimizin ismi oldu onu burada $dizi değişkenine atıyoruz.*/
    $dizi = $_POST['sira'];
    // Verileri güncelleme

    // Daha sonra veritabanında dizinin elemanlarına göre sırası ile hangi verinin id'si varsa onun sıralamasını güncelliyoruz.
    for ($i = 0; $i < count($dizi); $i++) {
        $stmt = $db->prepare("Update categories set sira = ? where id = ? ");
        $stmt->execute([$i, $dizi[$i]]);
    }
}

Ders videosu: