{"id":1040,"date":"2014-03-31T19:28:20","date_gmt":"2014-03-31T16:28:20","guid":{"rendered":"http:\/\/www.gncz.net\/?p=1040"},"modified":"2014-03-31T19:30:09","modified_gmt":"2014-03-31T16:30:09","slug":"php-ve-jquery-ile-kategori-icinde-ve-kategoriler-arasinda-siralama-yapma","status":"publish","type":"post","link":"https:\/\/gncz.net\/index.php\/php-ve-jquery-ile-kategori-icinde-ve-kategoriler-arasinda-siralama-yapma.html","title":{"rendered":"Php ve JQuery ile Kategori \u0130\u00e7inde ve Kategoriler Aras\u0131nda S\u0131ralama yapma"},"content":{"rendered":"

Bu uygulamam\u0131zda,\u00a0JQuery ile kategoriler aras\u0131nda ve kategori i\u00e7inde s\u0131ralanabilir listeler olu\u015fturmak<\/strong>.\u00a0JQuery\u2019nin\u00a0listeler aras\u0131 s\u00fcr\u00fckle b\u0131rak y\u00f6ntemi (draggable) ve liste i\u00e7i s\u0131ralama y\u00f6ntemini (sortable) birlikte kullanaca\u011f\u0131z. Yani bu uygulama bundan \u00f6nce yapt\u0131\u011f\u0131m\u0131z liste i\u00e7i s\u0131ralama ve kategoriler aras\u0131 de\u011fi\u015ftirme uygulamas\u0131n\u0131n birle\u015fimi olacak. Yapt\u0131\u011f\u0131m\u0131z de\u011fi\u015fiklikleri veritaban\u0131na Php PDO s\u0131n\u0131f\u0131\u00a0ve MySQL \u00a0veritaban\u0131n\u0131 kullanarak yapaca\u011f\u0131z. \u0130lk olarak veritaban\u0131 yap\u0131m\u0131zla yaz\u0131m\u0131za giri\u015f yapal\u0131m.\u00a0\u0130lk tablomuz\u00a0kategoriler<\/strong>, ikincisi ise kategorilerin i\u00e7eri\u011finin bulundu\u011fu\u00a0liste<\/strong>\u00a0adl\u0131yla a\u00e7t\u0131k.<\/p>\n\n\n\n\n\n\n
id<\/strong><\/td>\nadi<\/strong><\/td>\nsirasi<\/strong><\/td>\n<\/tr>\n
1<\/td>\nWeb sitesi<\/td>\n1<\/td>\n<\/tr>\n
2<\/td>\nProgramlama dili<\/td>\n2<\/td>\n<\/tr>\n
3<\/td>\nVeritaban\u0131<\/td>\n3<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
id<\/strong><\/td>\nadi<\/strong><\/td>\nsirasi<\/strong><\/td>\nkategorisi<\/strong><\/td>\n<\/tr>\n
1<\/td>\nBcakir<\/td>\n1<\/td>\n1<\/td>\n<\/tr>\n
2<\/td>\nFacebook<\/td>\n2<\/td>\n1<\/td>\n<\/tr>\n
3<\/td>\nInstagram<\/td>\n3<\/td>\n1<\/td>\n<\/tr>\n
4<\/td>\nTwitter<\/td>\n4<\/td>\n1<\/td>\n<\/tr>\n
5<\/td>\nGoogle<\/td>\n5<\/td>\n1<\/td>\n<\/tr>\n
6<\/td>\nPhp<\/td>\n1<\/td>\n2<\/td>\n<\/tr>\n
7<\/td>\nPython<\/td>\n2<\/td>\n2<\/td>\n<\/tr>\n
8<\/td>\nJava<\/td>\n3<\/td>\n2<\/td>\n<\/tr>\n
9<\/td>\nSQLite<\/td>\n1<\/td>\n3<\/td>\n<\/tr>\n
10<\/td>\nMySQL<\/td>\n2<\/td>\n3<\/td>\n<\/tr>\n
11<\/td>\nPostgreSQL<\/td>\n3<\/td>\n3<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Yukar\u0131da yer alan tablolar\u0131 (kategoriler ve\u00a0liste isimli) ve i\u00e7erisindeki \u00a0kay\u0131tlar\u0131n\u0131 kullanaca\u011f\u0131z. \u015eimdi uygulamam\u0131z\u0131n\u00a0index.php<\/strong>\u00a0sayfas\u0131n\u0131 yazabiliriz.<\/p>\n

 <\/p>\n

<?php\r\ninclude 'db\/db.php';\r\n$db = new baglan;\r\n$liste = $db->kategoriListesi();\r\n\/\/listeleri kolay olarak kullanmak i\u00e7in ayr\u0131\u015ft\u0131rma\r\n$kategoriler = $liste['0'];\r\n$icerikler = $liste['1'];\r\n$sayac = 0;\r\n?>\r\n<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd\">\r\n<html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\" xml:lang=\"en\" lang=\"en\">\r\n<head>\r\n    <meta http-equiv=\"content-type\" content=\"text\/html; charset=UTF-8\" \/>\r\n    <meta name=\"author\" content=\"bcakir\" \/>\r\n    <script type=\"text\/javascript\" src=\"http:\/\/code.jquery.com\/jquery-1.9.1.js\"><\/script>\r\n    <script type=\"text\/javascript\" src=\"http:\/\/code.jquery.com\/ui\/1.10.3\/jquery-ui.js\"><\/script>\r\n    <title>JQuery Kategori \u0130\u00e7inde ve Kategoriler Aras\u0131nda S\u0131ralama<\/title>\r\n\r\n    <script type=\"text\/javascript\">\r\n    $(document).ready(function(){\r\n        $(\".kategoriUl\").sortable({opacity: 0.5, connectWith: '.kategoriUl',\r\n            update: function(){\r\n                var kid = $(this).attr('id');\r\n                var siralama = $(this).sortable(\"serialize\");\r\n                var gidenDizilim = 'listeId[]='+kid+'&'+siralama;\r\n                $.post(\"db\/db.php\", gidenDizilim);                                           \r\n            }\r\n        });\r\n    });\r\n    <\/script>\r\n\r\n    <style>\r\n    h3 {margin: 5px 7px 0 7px; padding: 0 7px; font-size: 14px; line-height: 14px;}\r\n    ul {margin: 0 5px 5px 5px; padding: 5px; list-style-type: none; min-height: 40px;}\r\n    #kategori {float: left; width: 200px; margin-right: 20px;}\r\n    #kategori {border : 2px solid #ccc;}\r\n    .kategoriUl li {cursor: move; margin: 3px 0; padding: 5px;\r\n            background-color:#abe; border: #ccc solid 1px; color:#fff;}\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"kategoriler\">\r\n    <?php foreach($kategoriler As $kategori): ?>\r\n        <div id=\"kategori\">\r\n            <h3><?php echo $kategori['adi']; ?><\/h3>\r\n            <ul id=\"<?php echo $kategori['id']; ?>\" class=\"kategoriUl\">\r\n            <?php foreach($icerikler[$sayac] As $icerik): ?>\r\n                <li id=\"listeId_<?php echo $icerik['id']; ?>\"><?php echo $icerik['adi']; ?><\/li>\r\n            <?php endforeach; ?>\r\n            <\/ul>\r\n        <\/div>\r\n        <?php $sayac++; ?>\r\n    <?php endforeach; ?>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html><\/pre>\n
Kategorilerimizi ve bu kategorilerin i\u00e7inde yer alan kay\u0131tlar\u0131m\u0131z\u0131 veritaban\u0131ndan al\u0131p g\u00f6sterdik. Kategoriler i\u00e7i ve kategoriler aras\u0131 s\u00fcr\u00fckle b\u0131rak y\u00f6ntemiyle tetiklettirip, g\u00fcncellemek i\u00e7in post i\u015flemi yapt\u0131k. A\u015fa\u011f\u0131da ise g\u00f6nderilen kayd\u0131n id de\u011ferini, kategorisini ve liste i\u00e7erisindeki s\u0131ralamas\u0131n\u0131 al\u0131p de\u011fi\u015ftirece\u011fiz.<\/p>\n
<?php\r\nclass baglan{\r\n    \/\/veritaban\u0131 bilgileri\r\n    const host = 'localhost';\r\n    const user = 'root';\r\n    const pass = '';\r\n    const db = 'bcakir';\r\n    public $conn;\r\n    public $sonuclar = array();\r\n\r\n    public function __construct(){ \/\/a\u00e7\u0131l\u0131\u015fta \u00e7al\u0131\u015ft\u0131r\r\n        $this->dbBaglantiKur();\r\n    }\r\n\r\n    public function dbBaglantiKur(){ \/\/veritaban\u0131 ba\u011flant\u0131s\u0131 kurma\r\n        try{\r\n            $this->conn = new PDO(\"mysql:dbname=\".self::db.\";host=\".self::host, self::user, self::pass);\r\n            $this->conn->query(\"SET NAMES 'utf8'\");\r\n            $this->conn->query('set character set utf8');\r\n        }catch(PDOException $e){\r\n             die($e->getMessage());\r\n        }\r\n    }\r\n\r\n    public function kategoriListesi(){ \/\/b\u00fct\u00fcn kategori ve i\u00e7eriklerini alma\r\n        $this->dbKategorileriCek();\r\n        foreach($this->sonuclar['0'] As $kategori){\r\n            $this->dbListeyiCek($kategori['id']);\r\n        }\r\n        return $this->sonuclar;\r\n    }\r\n\r\n    public function dbKategorileriCek(){ \/\/b\u00fct\u00fcn kategorileri alma\r\n        $veriler = $this->conn->prepare('SELECT id,adi FROM kategoriler Order By id Asc');\r\n        $veriler->execute();\r\n        $this->sonuclar[] = $veriler->fetchAll(PDO::FETCH_ASSOC);\r\n    }\r\n\r\n    public function dbListeyiCek($kat){ \/\/kategorinin i\u00e7eri\u011fini alma\r\n        $veriler = $this->conn->prepare('SELECT id,adi FROM liste Where kategorisi=? Order By sirasi Asc');\r\n        $veriler->execute(array($kat));\r\n        $this->sonuclar['1'][] = $veriler->fetchAll(PDO::FETCH_ASSOC);\r\n    }\r\n\r\n    public function dbVeriyiGuncelle($lid, $kid, $sira){ \/\/kay\u0131t\u0131 g\u00fcncelleme\r\n        $guncelle = $this->conn->prepare('UPDATE liste SET kategorisi = :kid, sirasi = :sira WHERE id = :id');\r\n        return $guncelle->execute(array('id' => $lid, 'kid' => $kid, 'sira' => $sira));\r\n    }\r\n\r\n    public function listeKontrol($lid, $kid){ \/\/post ile gelen veri kontrol\u00fc\r\n        $sayac = 1;\r\n        $kid = strip_tags(trim($kid));\r\n        foreach($lid As $id){\r\n            $id = strip_tags(trim($id));\r\n            $this->dbVeriyiGuncelle($id, $kid, $sayac);   \r\n            $sayac++;\r\n        }\r\n    }\r\n}\r\n\r\n\/\/g\u00fcncelle iste\u011finde bulunulmu\u015fsa\r\nif(isset($_POST['listeId'])){\r\n    $kid = $_POST['listeId']['0'];\r\n    array_shift($_POST['listeId']);\r\n    $baglan = new baglan;\r\n    $baglan->listeKontrol($_POST['listeId'], $kid);\r\n}\r\n?><\/pre>\n
Kategori i\u00e7i ve kategoriler aras\u0131 s\u0131ralanabilir listeleri yukar\u0131daki gibi yapabilir ve veritaban\u0131n\u0131 da kullanarak kaydedebilirsiniz. Daha \u00f6nce yapt\u0131\u011f\u0131m\u0131z iki uygulamay\u0131 birle\u015ftirerek yeni bir uygulama yapt\u0131k. Yukar\u0131da yer alan ba\u011flant\u0131lardan onlar\u0131 da inceleyip, daha kolay ad\u0131mlar\u0131 \u00f6\u011frenebilirsiniz.<\/p>\n","protected":false},"excerpt":{"rendered":"
Bu uygulamam\u0131zda,\u00a0JQuery ile kategoriler aras\u0131nda ve kategori i\u00e7inde s\u0131ralanabilir listeler olu\u015fturmak.\u00a0JQuery\u2019nin\u00a0listeler aras\u0131 s\u00fcr\u00fckle b\u0131rak y\u00f6ntemi (draggable) ve liste i\u00e7i s\u0131ralama y\u00f6ntemini (sortable) birlikte kullanaca\u011f\u0131z. Yani bu uygulama bundan \u00f6nce yapt\u0131\u011f\u0131m\u0131z liste i\u00e7i s\u0131ralama ve kategoriler aras\u0131 de\u011fi\u015ftirme uygulamas\u0131n\u0131n birle\u015fimi olacak. Yapt\u0131\u011f\u0131m\u0131z de\u011fi\u015fiklikleri veritaban\u0131na Php PDO s\u0131n\u0131f\u0131\u00a0ve MySQL \u00a0veritaban\u0131n\u0131 kullanarak yapaca\u011f\u0131z. \u0130lk olarak veritaban\u0131 yap\u0131m\u0131zla yaz\u0131m\u0131za giri\u015f yapal\u0131m.\u00a0\u0130lk tablomuz\u00a0kategoriler, ikincisi ise[Devam\u0131n\u0131 Oku…]<\/a><\/p>\n","protected":false},"author":1,"featured_media":1041,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[28,20],"tags":[82,155,157,154,156],"_links":{"self":[{"href":"https:\/\/gncz.net\/index.php\/wp-json\/wp\/v2\/posts\/1040"}],"collection":[{"href":"https:\/\/gncz.net\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gncz.net\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gncz.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gncz.net\/index.php\/wp-json\/wp\/v2\/comments?post=1040"}],"version-history":[{"count":3,"href":"https:\/\/gncz.net\/index.php\/wp-json\/wp\/v2\/posts\/1040\/revisions"}],"predecessor-version":[{"id":1045,"href":"https:\/\/gncz.net\/index.php\/wp-json\/wp\/v2\/posts\/1040\/revisions\/1045"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gncz.net\/index.php\/wp-json\/wp\/v2\/media\/1041"}],"wp:attachment":[{"href":"https:\/\/gncz.net\/index.php\/wp-json\/wp\/v2\/media?parent=1040"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gncz.net\/index.php\/wp-json\/wp\/v2\/categories?post=1040"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gncz.net\/index.php\/wp-json\/wp\/v2\/tags?post=1040"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}