Facebook
twitter
Google Plus
RSS
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 | 2 | 1 | |
| 3 | 3 | 1 | |
| 4 | 4 | 1 | |
| 5 | 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<?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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<?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.
Bir Yorum