Php ve JQuery ile Kategori İçinde ve Kategoriler Arasında Sıralama yapma

Bu uygulamamızda, JQuery ile kategoriler arasında ve kategori içinde sıralanabilir listeler oluşturmak. JQuery’nin listeler arası sürükle bırak yöntemi (draggable) ve liste içi sıralama yöntemini (sortable) birlikte kullanacağız. Yani bu uygulama bundan önce yaptığımız liste içi sıralama ve kategoriler arası değiştirme uygulamasının birleşimi olacak. Yaptığımız değişiklikleri veritabanına Php PDO sınıfı ve MySQL veritabanını kullanarak yapacağız. İlk olarak veritabanı yapımızla yazımıza giriş yapalım. İlk tablomuz kategoriler, ikincisi ise kategorilerin içeriğinin bulunduğu liste adlıyla açtık.

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="https://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <title>JQuery Kategori İçinde ve Kategoriler Arasında Sıralama</title>

    <script type="text/javascript">
    $(document).ready(function(){
        $(".kategoriUl").sortable({opacity: 0.5, connectWith: '.kategoriUl',
            update: function(){
                var kid = $(this).attr('id');
                var siralama = $(this).sortable("serialize");
                var gidenDizilim = 'listeId[]='+kid+'&'+siralama;
                $.post("db/db.php", gidenDizilim);                                           
            }
        });
    });
    </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="listeId_<?php echo $icerik['id']; ?>"><?php echo $icerik['adi']; ?></li>
            <?php endforeach; ?>
            </ul>
        </div>
        <?php $sayac++; ?>
    <?php endforeach; ?>
</div>

</body>
</html>

<?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">

<head>

<title>JQuery Kategori İçinde ve Kategoriler Arasında Sıralama</title>

$(document).ready(function(){

$(".kategoriUl").sortable({opacity: 0.5, connectWith: '.kategoriUl',

update: function(){

var kid = $(this).attr('id');

var siralama = $(this).sortable("serialize");

var gidenDizilim = 'listeId[]='+kid+'&'+siralama;

$.post("db/db.php", gidenDizilim);

}

});

</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>

<?php foreach($kategoriler As $kategori): ?>

<ul id="<?php echo $kategori['id']; ?>" class="kategoriUl">

<?php foreach($icerikler[$sayac] As $icerik): ?>

<?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. Kategoriler içi ve kategoriler arası sürükle bırak yöntemiyle tetiklettirip, güncellemek için post işlemi yaptık. Aşağıda ise gönderilen kaydın id değerini, kategorisini ve liste içerisindeki sıralamasını alıp değiştireceğiz.

<?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, $sira){ //kayıtı güncelleme
        $guncelle = $this->conn->prepare('UPDATE liste SET kategorisi = :kid, sirasi = :sira WHERE id = :id');
        return $guncelle->execute(array('id' => $lid, 'kid' => $kid, 'sira' => $sira));
    }

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

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

<?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, $sira){ //kayıtı güncelleme

$guncelle = $this->conn->prepare('UPDATE liste SET kategorisi = :kid, sirasi = :sira WHERE id = :id');

return $guncelle->execute(array('id' => $lid, 'kid' => $kid, 'sira' => $sira));

}

public function listeKontrol($lid, $kid){ //post ile gelen veri kontrolü

$sayac = 1;

$kid = strip_tags(trim($kid));

foreach($lid As $id){

$id = strip_tags(trim($id));

$this->dbVeriyiGuncelle($id, $kid, $sayac);

$sayac++;

}

//güncelle isteğinde bulunulmuşsa

if(isset($_POST['listeId'])){

$kid = $_POST['listeId']['0'];

array_shift($_POST['listeId']);

$baglan = new baglan;

$baglan->listeKontrol($_POST['listeId'], $kid);

}

Kategori içi ve kategoriler arası sıralanabilir listeleri yukarıdaki gibi yapabilir ve veritabanını da kullanarak kaydedebilirsiniz. Daha önce yaptığımız iki uygulamayı birleştirerek yeni bir uygulama yaptık. Yukarıda yer alan bağlantılardan onları da inceleyip, daha kolay adımları öğrenebilirsiniz.