{"id":1062,"date":"2014-03-31T19:58:03","date_gmt":"2014-03-31T16:58:03","guid":{"rendered":"http:\/\/www.gncz.net\/?p=1062"},"modified":"2014-03-31T19:58:50","modified_gmt":"2014-03-31T16:58:50","slug":"php-ve-jquery-ile-surukleyerek-siralama","status":"publish","type":"post","link":"https:\/\/gncz.net\/index.php\/php-ve-jquery-ile-surukleyerek-siralama.html","title":{"rendered":"Php ve JQuery ile S\u00fcr\u00fckleyerek S\u0131ralama"},"content":{"rendered":"

JQuery ile s\u00fcr\u00fckleyerek s\u0131ralanabilir (sortable) liste olu\u015fturmak<\/strong>. Bu listeyi sadece Php ile de\u011fi\u015ftirmek i\u00e7in selectbox gibi bir input kullanmam\u0131z gerekirdi, ama art\u0131k bunu JQuery UI s\u00fcr\u00fckle b\u0131rak (drag and drop) y\u00f6ntemi ile hem daha g\u00f6rsel hem de daha kullan\u0131\u015fl\u0131 olarak yapabiliriz. Uygulamam\u0131zda JQuery\u2019nin yan\u0131nda Php ve MySQL veritaban\u0131da kullanaca\u011f\u0131m \u00e7\u00fcnk\u00fc yapt\u0131\u011f\u0131m\u0131z s\u0131ralaman\u0131n kaydedilmesini de istiyorum. Bu uygulamayla kategorileri ya da bir kategori alt\u0131ndaki yaz\u0131lar\u0131 kolayca s\u0131ralamam\u0131z m\u00fcmk\u00fcn. Yapaca\u011f\u0131m\u0131z uygulaman\u0131n (bundan sonrakiler dahil) veritaban\u0131 i\u015flemlerinde, \u00f6nceki yaz\u0131mda geli\u015ftirdi\u011fimiz\u00a0PDO s\u0131n\u0131f\u0131n\u0131<\/a> kullanaca\u011f\u0131m. Yaz\u0131m\u0131za veritaban\u0131 yap\u0131s\u0131n\u0131 g\u00f6stererek ba\u015flayabiliriz.<\/p>\n\n\n\n\n\n\n\n\n
id<\/strong><\/td>\nadi<\/strong><\/td>\nsirasi<\/strong><\/td>\n<\/tr>\n
1<\/td>\nBcakir<\/td>\n1<\/td>\n<\/tr>\n
2<\/td>\nFacebook<\/td>\n2<\/td>\n<\/tr>\n
3<\/td>\nInstagram<\/td>\n3<\/td>\n<\/tr>\n
4<\/td>\nTwitter<\/td>\n4<\/td>\n<\/tr>\n
5<\/td>\nGoogle<\/td>\n5<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Yukar\u0131daki veritaban\u0131 \u015femas\u0131n\u0131 ve kay\u0131tlar\u0131n\u0131 kullanaca\u011f\u0131z listemizde. Uygulaman\u0131n sql dosyas\u0131 indirme linkinde de bulunacak. \u015eimdi uygulaman\u0131n Html ve JQuery k\u0131sm\u0131n\u0131 yazabiliriz.<\/p>\n

<?php\r\ninclude 'db\/db.php';\r\n$db = new baglan;\r\n$liste = $db->dbVerileriCek();\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 S\u0131ralama<\/title>\r\n\r\n    <script type=\"text\/javascript\">\r\n    $(document).ready(function(){\r\n        $(\"#liste ul\").sortable({opacity: 0.5, update: function(){\r\n            var siralama = $(this).sortable(\"serialize\");\r\n            $.post(\"db\/db.php\", siralama);                                          \r\n        }});\r\n    });\r\n    <\/script>\r\n\r\n    <style>\r\n    ul {margin: 5px; padding: 5px; list-style-type: none;}\r\n    #liste {float: left; width: 200px;}\r\n    #liste 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=\"liste\">\r\n    <ul>\r\n        <li id=\"listeId_guncelle\" style=\"display: none;\"><\/li>\r\n        <?php foreach($liste As $lst): ?>\r\n        <li id=\"listeId_<?php echo $lst['id']; ?>\"><?php echo $lst['adi']; ?><\/li>\r\n        <?php endforeach; ?>\r\n    <\/ul>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html><\/pre>\n
Listemizin i\u00e7eri\u011fini veritaban\u0131ndan al\u0131p g\u00f6sterdik ve listenin s\u0131ralamas\u0131 s\u00fcr\u00fckleyerek de\u011fi\u015ftirildi\u011finde s\u0131ralamay\u0131 tekrar g\u00fcncellemek i\u00e7in post i\u015flemi yapt\u0131k. A\u015fa\u011f\u0131da ise g\u00f6nderilen liste id ve s\u0131ras\u0131n\u0131 kontrol edip, de\u011fi\u015ftirme 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\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 dbVeriyiGuncelle($id, $sira){ \/\/kay\u0131t\u0131 g\u00fcncelleme\r\n        $guncelle = $this->conn->prepare('UPDATE liste SET sirasi = :sira WHERE id = :id');\r\n        return $guncelle->execute(array('id' => $id, 'sira' => $sira));\r\n    }\r\n\r\n    public function dbVerileriCek(){ \/\/b\u00fct\u00fcn listeyi alma\r\n        $veriler = $this->conn->prepare('SELECT id,adi FROM liste Order By sirasi Asc');\r\n        $veriler->execute();\r\n        return $veriler->fetchAll(PDO::FETCH_ASSOC);\r\n    }\r\n\r\n    public function listeKontrol($liste){ \/\/post ile gelen veri kontrol\u00fc\r\n        $sayac = 1;\r\n        foreach($liste As $id){\r\n            $id = strip_tags(trim($id));\r\n            $this->dbVeriyiGuncelle($id, $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']) && $_POST['listeId']['0'] == 'guncelle'){\r\n    array_shift($_POST['listeId']);\r\n    $baglan = new baglan;\r\n    $baglan->listeKontrol($_POST['listeId']);\r\n}\r\n?><\/pre>\n
Yukar\u0131daki gibi s\u0131ralanabilir listeleri kolayca yapabilir ve s\u0131ralaman\u0131z\u0131 veritaban\u0131 yard\u0131m\u0131yla kaydedebilirsiniz.<\/p>\n","protected":false},"excerpt":{"rendered":"
JQuery ile s\u00fcr\u00fckleyerek s\u0131ralanabilir (sortable) liste olu\u015fturmak. Bu listeyi sadece Php ile de\u011fi\u015ftirmek i\u00e7in selectbox gibi bir input kullanmam\u0131z gerekirdi, ama art\u0131k bunu JQuery UI s\u00fcr\u00fckle b\u0131rak (drag and drop) y\u00f6ntemi ile hem daha g\u00f6rsel hem de daha kullan\u0131\u015fl\u0131 olarak yapabiliriz. Uygulamam\u0131zda JQuery\u2019nin yan\u0131nda Php ve MySQL veritaban\u0131da kullanaca\u011f\u0131m \u00e7\u00fcnk\u00fc yapt\u0131\u011f\u0131m\u0131z s\u0131ralaman\u0131n kaydedilmesini de istiyorum. Bu uygulamayla kategorileri ya da[Devam\u0131n\u0131 Oku…]<\/a><\/p>\n","protected":false},"author":1,"featured_media":785,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[28],"tags":[181,180,157,178,179],"_links":{"self":[{"href":"https:\/\/gncz.net\/index.php\/wp-json\/wp\/v2\/posts\/1062"}],"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=1062"}],"version-history":[{"count":2,"href":"https:\/\/gncz.net\/index.php\/wp-json\/wp\/v2\/posts\/1062\/revisions"}],"predecessor-version":[{"id":1064,"href":"https:\/\/gncz.net\/index.php\/wp-json\/wp\/v2\/posts\/1062\/revisions\/1064"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gncz.net\/index.php\/wp-json\/wp\/v2\/media\/785"}],"wp:attachment":[{"href":"https:\/\/gncz.net\/index.php\/wp-json\/wp\/v2\/media?parent=1062"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gncz.net\/index.php\/wp-json\/wp\/v2\/categories?post=1062"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gncz.net\/index.php\/wp-json\/wp\/v2\/tags?post=1062"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}