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

 bcakir
 12 Ocak 2014

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

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);
}
?>

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. Uygulamamızın demosunu buradan görebilir ve bütün içeriğin olduğu dosyayı buradan indirebilirsiniz.

 1.320 Okunma

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

  1. Sortable ile yapımı çok kolaymış, güzel örnek teşekkür ederim anlatımın için.

  2. Sıralama ve kategorileme yapmak için bire bir teşekkürler, kullanırım ben bunu.

  3. teşekkurler çok yardımcı oldu yazınız..

  4. Merhaba Sayın çakır emekleriniz için teşekkürler öncelikle bir kaç çalışmanızı daha internetten gördüm. Bu yaptığınız çalışmanın demosunu indirdim, çalıştırırken 1 tane tablo açmışım liste tablosunu açmamışım bu yüzden biraz uğraştırdı beni. Fakat sorunsuz çalışıyor. Ellerine sağlık.

  5. Tebrik ediyorum.. Sitenizi de genel olarak inceledim. Bir çok başlık altında yapmış olduğunuz düzenli, düzeyli ve özenli anlatımlarınız için sizi tebrik etmek istedim..
    Bir çok forum-blog sitelerine örnek teşkil eder umarım…
    Kolay gelsin.

  6. Merhaba hocam, bunu codeignitere nasıl entegre edebiliriz.

    • Javascript kodlarını ci’nin (codeigniter) view kısmında yazdıktan sonra, ister istek yapacağınız veritabanı kodları için ayrı bir php dosyası kullanın isterseniz de bir ci sınıfının altında metodlar oluşturup bu metodlarin bağlantısını verip istekte bulunun. Özetle, sayfa ilk açılışta göstereceğiniz kategoriler ci’nin veritabanı istek sorgusundan sayfada gösterilecek, sadece değişiklik yapıldığında ajax isteğiyle başka php dosyasına ya da sınıf altına yazacağınız metodlara gidilecek.

      • Cevabınız için teşekkür ederim hocam. İnşallah yapabilirim.

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

Daha fazla JQuery, MySQL, Php
Kapat