Php ve JQuery ile Sürükleyerek Sıralama

 bcakir
 5 Ocak 2014

Bu uygulamamızın konusu, JQuery ile sürükleyerek sıralanabilir (sortable) liste oluşturmak. Bu listeyi sadece Php ile değiştirmek için selectbox gibi bir input kullanmamız gerekirdi, ama artık bunu JQuery UI sürükle bırak (drag and drop) yöntemi ile hem daha görsel hem de daha kullanışlı olarak yapabiliriz. Uygulamamızda JQuery’nin yanında Php ve MySQL veritabanıda kullanacağım çünkü yaptığımız sıralamanın kaydedilmesini de istiyorum. Bu uygulamayla kategorileri ya da bir kategori altındaki yazıları kolayca sıralamamız mümkün. Yapacağımız uygulamanın (bundan sonrakiler dahil) veritabanı işlemlerinde, önceki yazımda geliştirdiğimiz PDO sınıfını kullanacağım. Yazımıza veritabanı yapısını göstererek başlayabiliriz.

id adi sirasi
1 Bcakir 1
2 Facebook 2
3 Instagram 3
4 Twitter 4
5 Google 5

Yukarıdaki veritabanı şemasını ve kayıtlarını kullanacağız listemizde. Uygulamanın sql dosyası indirme linkinde de bulunacak. Şimdi uygulamanın Html ve JQuery kısmını yazabiliriz.

<?php 
include 'db/db.php'; 
$db = new baglan;
$liste = $db->dbVerileriCek();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<meta name="author" content="bcakir" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <title>Php ve JQuery ile Sürükleyerek Sıralama</title>

	<script type="text/javascript">
	$(document).ready(function(){ 
		$("#liste ul").sortable({opacity: 0.5, update: function(){
			var siralama = $(this).sortable("serialize");
			$.post("db/db.php", siralama);											 
		}});
	});	
	</script>

	<style>
	ul {margin: 5px; padding: 5px; list-style-type: none;}
	#liste {float: left; width: 200px;}
	#liste li {cursor: move; margin: 3px 0; padding: 5px; 
			background-color:#abe; border: #ccc solid 1px; color:#fff;}
	</style>
</head>
<body>

<div id="liste">
	<ul>
        <li id="listeId_guncelle" style="display: none;"></li>
		<?php foreach($liste As $lst): ?>
        <li id="listeId_<?php echo $lst['id']; ?>"><?php echo $lst['adi']; ?></li>
        <?php endforeach; ?>
	</ul>
</div>

</body>
</html>

Listemizin içeriğini veritabanından alıp gösterdik ve listenin sıralaması sürükleyerek değiştirildiğinde sıralamayı tekrar güncellemek için post işlemi yaptık. Aşağıda ise gönderilen liste id ve sırasını kontrol edip, değiştirme işlemini Php ile MySQL veritabanına yapacağız.

<?php
class baglan{
    //veritabanı bilgileri
    const host = 'localhost';
    const user = 'root';
    const pass = '';
    const db = 'bcakir';
    public $conn;

    public function __construct(){ //açılışta çalıştır
        $this->dbBaglantiKur();
    }

    public function dbBaglantiKur(){ //veritabanı bağlantısı kurma
        try{
            $this->conn = new PDO("mysql:dbname=".self::db.";host=".self::host, self::user, self::pass);
            $this->conn->query("SET NAMES 'utf8'");
            $this->conn->query('set character set utf8');
        }catch(PDOException $e){
             die($e->getMessage());
        }
    }

    public function dbVeriyiGuncelle($id, $sira){ //kayıtı güncelleme
        $guncelle = $this->conn->prepare('UPDATE liste SET sirasi = :sira WHERE id = :id');
        return $guncelle->execute(array('id' => $id, 'sira' => $sira));
    }

    public function dbVerileriCek(){ //bütün listeyi alma
        $veriler = $this->conn->prepare('SELECT id,adi FROM liste Order By sirasi Asc');
        $veriler->execute();
        return $veriler->fetchAll(PDO::FETCH_ASSOC);
    }

    public function listeKontrol($liste){ //post ile gelen veri kontrolü
        $sayac = 1;
        foreach($liste As $id){
            $id = strip_tags(trim($id));
            $this->dbVeriyiGuncelle($id, $sayac);   
            $sayac++;
        }
    }
}

//güncelle isteğinde bulunulmuşsa
if(isset($_POST['listeId']) && $_POST['listeId']['0'] == 'guncelle'){
    array_shift($_POST['listeId']);
    $baglan = new baglan;
    $baglan->listeKontrol($_POST['listeId']);
}
?>

Yukarıdaki gibi sıralanabilir listeleri kolayca yapabilir ve sıralamanızı veritabanı yardımıyla kaydedebilirsiniz. Ben bunun nasıl yapıldığını göstermeye çalıştım, kullanım amacı ise sizin ihtiyacınıza ve hayal gücünüze bağlı. Sürükle bırak liste yapımı uygulamamızın demosunu buradan görebilir ve bütün içeriğin olduğu dosyayı buradan indirebilirsiniz.

 2.603 Okunma

Bu yazıya 9 yorum yapılmış.

  1. Beğendim uygulamayı. Bir de bunun farklı kategorilerde ayrı ayrı listeler var, listelerdeki elemanları sürükleyerek kategori değiştirdiği şeklinde olanı var. Onunla ilgilide bu şekilde basit anlatımlı bir yazı yazabilir misin? Yabancı sitelerden buluyorum ama mantığını anlamıyorum. Yazarken aklıma geldi, iki örnek birleştirilip kategori içi ve kategoriler arası listeleme gibi de olabilir. Bunu yazarsan ben ve okuyanlar da yararlanır. Teşekkür ederim, iyi çalışmalar.

    • Teşekkür ederim, aslında kategoriler arası sürükleme uygulamasını da yazacaktım ama pazar günü fazla zaman bulamadım. En azından 1 tane yazayım dedim, diğerini de yazılacaklar listeme almıştım, zaman bulduğumda yazacağım.

  2. Jquery saolsun bu tarz uygulamalar çok basit artık. Eskiden Flash ile ancak yapılırdı böyle sürüklemeli işler.

  3. Baya kolaymış bu, basitçe anlatım için teşkkürler.

  4. Merhabalar,
    Öncelikle paylaşımınız için çok teşekkür ederim. Bir sorum olacak bu uygulama php ve mysql hangi sürümlerinden sonra çalışıyor? Eski sürüm phpmyadmin de çalıştıramadım. Boş çıkıyor görüntü, her şey de normal bağlantıları falan eksiksiz yaptım.

    • Merhaba, PDO için PHP v5.1 ve üzeri gerekiyor (eklenti olarak kurmadığınız sürece), MySQL için bir sürüm kısıtlaması bulunmuyor.

  5. Merhaba, mantığını tam olarak anlayamadım, açıklayabilir misiniz?

  6. Merhaba, paylaşım ve anlatım için çok teşekkürler, beni buyuk bir sorundan kurtardı. Fakat bende kategoriler arası sıralama yaparken kodun içinde sql sorguma where cat_id=$kat seklinde ekleme yaptım, değişkenime print yaptığımda geldiğini görüyorum fakat sorgu içinde boş geliyor.
    2. olarak function dbVerileriCek($cat) şeklinde yapıp sqlimi düzenledikten sonra execute(‘cat’=>$cat) yaptım gene çalışmadı. Bu sorunu çözmem için yardımcı olursanız sevinirim, teşekkürler.

  7. sorunu index.php dosyasinin icini

    // ———– EKLEDIM
    <li id="listeId_”>

    şeklinde düzenleyerek çözdum. db sorgusuyla degil, goster veya gosterme olarak çözdum. Bu şekilde sanırım yavaş çalışır belki ama şimdilik işimi gördü, direk db ye müdahale edebileceğim şekilde örnek de yaparsanız sevinirim, teşekkürler.

Yazı hakkında görüşlerinizi belirtmek istermisiniz?

Daha fazla JQuery, MySQL, Php
Kapat