{"id":1044,"date":"2014-03-31T19:34:42","date_gmt":"2014-03-31T16:34:42","guid":{"rendered":"http:\/\/www.gncz.net\/?p=1044"},"modified":"2014-03-31T19:34:43","modified_gmt":"2014-03-31T16:34:43","slug":"php-ve-jquery-ile-surukleyerek-kategori-degistirme","status":"publish","type":"post","link":"https:\/\/gncz.net\/index.php\/php-ve-jquery-ile-surukleyerek-kategori-degistirme.html","title":{"rendered":"Php ve JQuery ile S\u00fcr\u00fckle B\u0131rak ile Kategori De\u011fi\u015ftirme"},"content":{"rendered":"

Bu uygulamam\u0131zda,\u00a0JQuery ile s\u00fcr\u00fckleyerek kategoriler aras\u0131 de\u011fi\u015ftirilebilir listeler olu\u015fturmak<\/strong>. JQuery\u2019nin\u00a0listeler aras\u0131 s\u00fcr\u00fckle b\u0131rak y\u00f6nteminin (draggable) yan\u0131nda, Php ve MySQL\u2019de veritaban\u0131yla destekleyece\u011fiz \u00e7\u00fcnk\u00fc yapt\u0131\u011f\u0131m\u0131z s\u0131ralaman\u0131n ba\u015fka yerlerde kullanabilmemiz i\u00e7in kaydedilmesi gerekiyor. Uygulamam\u0131z\u0131n veritaban\u0131 i\u015flemlerinde, \u00f6nceki yaz\u0131mda geli\u015ftirdi\u011fimiz\u00a0PDO s\u0131n\u0131f\u0131n\u0131\u00a0kullanaca\u011f\u0131z. Yaz\u0131m\u0131za veritaban\u0131 yap\u0131s\u0131n\u0131 g\u00f6stererek ba\u015flayabiliriz. Ayr\u0131ca yaz\u0131n\u0131n sonunda sql dosyas\u0131n\u0131 da bulabilece\u011finiz indirme ba\u011flant\u0131m\u0131z bulunacak. \u0130lki (\u00fcste bulunan) kategoriler<\/strong>, ikincisi ise liste<\/strong>\u00a0adl\u0131 tablomuz.<\/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 index.php<\/strong> sayfas\u0131n\u0131 yazabiliriz.<\/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>Php ve JQuery ile S\u00fcr\u00fckleyerek Kategori De\u011fi\u015ftirme<\/title>\r\n\r\n    <script type=\"text\/javascript\">\r\n    $(document).ready(function(){\r\n        $(\".kategoriUl li\").draggable({\r\n            revert: true\r\n        });\r\n\r\n        $(\".kategoriUl\").droppable({\r\n            accept: \".kategoriUl li\",\r\n            drop: function(event, ui){\r\n                var birakilanUl = $(ui.draggable);\r\n                $(this).prepend(birakilanUl);\r\n                var suruklenenLi = ui.draggable.attr(\"id\");\r\n                var birakilanKat = ui.draggable.parent(\"ul\").attr(\"id\");\r\n                $.post(\"db\/db.php\", {lid: suruklenenLi, kid: birakilanKat});\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=\"<?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. Kay\u0131tlar\u0131n s\u00fcr\u00fckleyerek kategorisi de\u011fi\u015ftirildi\u011finde g\u00fcncellemek i\u00e7in post i\u015flemi yapt\u0131k. A\u015fa\u011f\u0131da ise g\u00f6nderilen kayd\u0131n id de\u011ferini ve kategorisini al\u0131p g\u00fcncelleme i\u015flemini Php ile MySQL veritaban\u0131na yapaca\u011f\u0131z.<\/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){ \/\/kay\u0131t\u0131 g\u00fcncelleme\r\n        $guncelle = $this->conn->prepare('UPDATE liste SET kategorisi = :kid WHERE id = :id');\r\n        return $guncelle->execute(array('id' => $lid, 'kid' => $kid));\r\n    }\r\n\r\n    public function listeKontrol($lid, $kid){ \/\/post ile gelen veri kontrol\u00fc\r\n        $lid = strip_tags(trim($lid));\r\n        $kid = strip_tags(trim($kid));\r\n        $this->dbVeriyiGuncelle($lid, $kid);\r\n    }\r\n}\r\n\r\n\/\/g\u00fcncelle iste\u011finde bulunulmu\u015fsa\r\nif(isset($_POST['lid']) && isset($_POST['kid'])){\r\n    $baglan = new baglan;\r\n    $baglan->listeKontrol($_POST['lid'], $_POST['kid']);\r\n}\r\n?><\/pre>\n
Yukar\u0131da veritaban\u0131na PDO ile kategorilerimizin i\u00e7eri\u011fini kaydettik.<\/p>\n","protected":false},"excerpt":{"rendered":"
Bu uygulamam\u0131zda,\u00a0JQuery ile s\u00fcr\u00fckleyerek kategoriler aras\u0131 de\u011fi\u015ftirilebilir listeler olu\u015fturmak. JQuery\u2019nin\u00a0listeler aras\u0131 s\u00fcr\u00fckle b\u0131rak y\u00f6nteminin (draggable) yan\u0131nda, Php ve MySQL\u2019de veritaban\u0131yla destekleyece\u011fiz \u00e7\u00fcnk\u00fc yapt\u0131\u011f\u0131m\u0131z s\u0131ralaman\u0131n ba\u015fka yerlerde kullanabilmemiz i\u00e7in kaydedilmesi gerekiyor. Uygulamam\u0131z\u0131n veritaban\u0131 i\u015flemlerinde, \u00f6nceki yaz\u0131mda geli\u015ftirdi\u011fimiz\u00a0PDO s\u0131n\u0131f\u0131n\u0131\u00a0kullanaca\u011f\u0131z. Yaz\u0131m\u0131za veritaban\u0131 yap\u0131s\u0131n\u0131 g\u00f6stererek ba\u015flayabiliriz. Ayr\u0131ca yaz\u0131n\u0131n sonunda sql dosyas\u0131n\u0131 da bulabilece\u011finiz indirme ba\u011flant\u0131m\u0131z bulunacak. \u0130lki (\u00fcste bulunan) kategoriler, ikincisi ise liste\u00a0adl\u0131 tablomuz.[Devam\u0131n\u0131 Oku…]<\/a><\/p>\n","protected":false},"author":1,"featured_media":1046,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[28,20],"tags":[161,162,158,160,159],"_links":{"self":[{"href":"https:\/\/gncz.net\/index.php\/wp-json\/wp\/v2\/posts\/1044"}],"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=1044"}],"version-history":[{"count":2,"href":"https:\/\/gncz.net\/index.php\/wp-json\/wp\/v2\/posts\/1044\/revisions"}],"predecessor-version":[{"id":1048,"href":"https:\/\/gncz.net\/index.php\/wp-json\/wp\/v2\/posts\/1044\/revisions\/1048"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gncz.net\/index.php\/wp-json\/wp\/v2\/media\/1046"}],"wp:attachment":[{"href":"https:\/\/gncz.net\/index.php\/wp-json\/wp\/v2\/media?parent=1044"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gncz.net\/index.php\/wp-json\/wp\/v2\/categories?post=1044"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gncz.net\/index.php\/wp-json\/wp\/v2\/tags?post=1044"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}