Php ve JQuery ile Sürükleyerek Kategori Değiştirme

 bcakir
 12 Ocak 2014

Bu uygulamamızda, JQuery ile sürükleyerek kategoriler arası değiştirilebilir listeler oluşturmak. JQuery’nin listeler arası sürükle bırak yönteminin (draggable) yanında, Php ve MySQL’de veritabanıyla destekleyeceğiz çünkü yaptığımız sıralamanın başka yerlerde kullanabilmemiz için kaydedilmesi gerekiyor. Uygulamamızın veritabanı işlemlerinde, önceki yazımda geliştirdiğimiz PDO sınıfını kullanacağız. Yazımıza veritabanı yapısını göstererek başlayabiliriz. Ayrıca yazının sonunda sql dosyasını da bulabileceğiniz indirme bağlantımız bulunacak. İlki (üste bulunan) kategoriler, ikincisi ise liste adlı tablomuz.

id adi sirasi
1 Web sitesi 1
2 Programlama dili 2
3 Veritabanı 3

 

id adi sirasi kategorisi
1 Bcakir 1 1
2 Facebook 2 1
3 Instagram 3 1
4 Twitter 4 1
5 Google 5 1
6 Php 1 2
7 Python 2 2
8 Java 3 2
9 SQLite 1 3
10 MySQL 2 3
11 PostgreSQL 3 3

Yukarıda yer alan tabloları (kategoriler ve liste isimli) ve içerisindeki  kayıtlarını kullanacağız. Şimdi uygulamamızın index.php sayfasını yazabiliriz.

<?php 
include 'db/db.php'; 
$db = new baglan;
$liste = $db->kategoriListesi();
//listeleri kolay olarak kullanmak için ayrıştırma
$kategoriler = $liste['0'];
$icerikler = $liste['1'];
$sayac = 0;
?>
<!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 Kategori Değiştirme</title>

	<script type="text/javascript">
	$(document).ready(function(){ 
		$(".kategoriUl li").draggable({
			revert: true
		});

        $(".kategoriUl").droppable({
			accept: ".kategoriUl li",
			drop: function(event, ui){
				var birakilanUl = $(ui.draggable);
				$(this).prepend(birakilanUl);
				var suruklenenLi = ui.draggable.attr("id");
				var birakilanKat = ui.draggable.parent("ul").attr("id");
                $.post("db/db.php", {lid: suruklenenLi, kid: birakilanKat});
			}
		});
	});	
	</script>

	<style>
    h3 {margin: 5px 7px 0 7px; padding: 0 7px; font-size: 14px; line-height: 14px;}
	ul {margin: 0 5px 5px 5px; padding: 5px; list-style-type: none; min-height: 40px;}
	#kategori {float: left; width: 200px; margin-right: 20px;}
    #kategori {border : 2px solid #ccc;}
	.kategoriUl li {cursor: move; margin: 3px 0; padding: 5px; 
			background-color:#abe; border: #ccc solid 1px; color:#fff;}
	</style>
</head>
<body>

<div id="kategoriler">
	<?php foreach($kategoriler As $kategori): ?>
        <div id="kategori">
            <h3><?php echo $kategori['adi']; ?></h3>
            <ul id="<?php echo $kategori['id']; ?>" class="kategoriUl">
            <?php foreach($icerikler[$sayac] As $icerik): ?>
                <li id="<?php echo $icerik['id']; ?>"><?php echo $icerik['adi']; ?></li>
            <?php endforeach; ?>
            </ul>
        </div>
        <?php $sayac++; ?>
    <?php endforeach; ?>
</div>

</body>
</html>

Kategorilerimizi ve bu kategorilerin içinde yer alan kayıtlarımızı veritabanından alıp gösterdik. Kayıtların sürükleyerek kategorisi değiştirildiğinde güncellemek için post işlemi yaptık. Aşağıda ise gönderilen kaydın id değerini ve kategorisini alıp güncelleme 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 $sonuclar = array();

    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 kategoriListesi(){ //bütün kategori ve içeriklerini alma
        $this->dbKategorileriCek();
        foreach($this->sonuclar['0'] As $kategori){
            $this->dbListeyiCek($kategori['id']);
        }
        return $this->sonuclar;
    }

    public function dbKategorileriCek(){ //bütün kategorileri alma
        $veriler = $this->conn->prepare('SELECT id,adi FROM kategoriler Order By id Asc');
        $veriler->execute();
        $this->sonuclar[] = $veriler->fetchAll(PDO::FETCH_ASSOC);
    }

    public function dbListeyiCek($kat){ //kategorinin içeriğini alma
        $veriler = $this->conn->prepare('SELECT id,adi FROM liste Where kategorisi=? Order By sirasi Asc');
        $veriler->execute(array($kat));
        $this->sonuclar['1'][] = $veriler->fetchAll(PDO::FETCH_ASSOC);
    }

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

    public function listeKontrol($lid, $kid){ //post ile gelen veri kontrolü
        $lid = strip_tags(trim($lid));
        $kid = strip_tags(trim($kid));
        $this->dbVeriyiGuncelle($lid, $kid);
    }
}

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

Yukarıda veritabanına PDO ile kategorilerimizin içeriğini kaydettik. JQuery ile kategoriler arası sürükleyerek değiştirme uygulamamızın demosunu buradan görüntüleyebilir ve bütün içeriğin olduğu dosyayı buradan indirebilirsiniz. Bir sonraki yazımız hem kategori içi hem de kategoriler arası sıralanabilir liste uygulaması olacak.

 709 Okunma

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

  1. Sürükleme işlemi gayet basitmiş, kategorileme yaparken admin panelinde kullanırım bunu.

  2. Güzel uygulama, klavyene, gözlerine, parmaklarına sağlık 😀

  3. Kategorileme için kullanacağım örneğini, teşekkürler.

  4. Kategorileme yapmak çok kolaymış, tam da bunu arıyordum teşekkürler.

  5. Eline koluna sağlık ilham verdi…

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

Daha fazla JQuery, MySQL, Php
Kapat