jQuery, PHP ve MySQL ile Sürükle Bırak Sıralama (Sortable)

Bu yazımda jQuery kullanarak Sürükle Bırak Sıralama yapacağız ve nesnemizin pozisyonunu PHP aracılığı ile MySQL veritabanımıza kayıt edeceğiz.

Yapacağımız uygulamasının demosu için : DEMO

Şimdi adım adım işlemlerimizi uygulayalım.

1.Adım : Tablomuzu oluşturuyoruz :

CREATE TABLE IF NOT EXISTS `wwphpjQuerySortable` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `position` int(5) NOT NULL,
  `title` varchar(16) COLLATE utf8_bin NOT NULL,
  `description` varchar(64) COLLATE utf8_bin NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_bin AUTO_INCREMENT=1;

CREATE TABLE IF NOT EXISTS `wwphpjQuerySortable` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`position` int(5) NOT NULL,

`title` varchar(16) COLLATE utf8_bin NOT NULL,

`description` varchar(64) COLLATE utf8_bin NOT NULL,

PRIMARY KEY (`id`)

) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_bin AUTO_INCREMENT=1;

2.Adım : Örnek verilerimizi tablomuza ekliyoruz :

INSERT INTO `wwphpjQuerySortable` (`id`, `position`, `title`, `description`) VALUES
(1, 0, 'Title 1', 'Description 1'),
(2, 1, 'Title 2', 'Description 2'),
(3, 2, 'Title 3', 'Description 3'),
(4, 3, 'Title 4', 'Description 4'),
(5, 4, 'Title 5', 'Description 5');

INSERT INTO `wwphpjQuerySortable` (`id`, `position`, `title`, `description`) VALUES

(1, 0, 'Title 1', 'Description 1'),

(2, 1, 'Title 2', 'Description 2'),

(3, 2, 'Title 3', 'Description 3'),

(4, 3, 'Title 4', 'Description 4'),

(5, 4, 'Title 5', 'Description 5');

3.Adım : index.php dosyamızı oluşturuyoruz :

<!DOCTYPE html>
<html lang="en">
<head>
	<title>jQuery Sürükle Bırak ile Sıralama Örneği</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
	<style>
		.SurukleIco
		{
			cursor: move;
		}
	</style>
</head>
<?php
$db 		= new PDO("mysql:dbname=VT_ADI;host=localhost","VT_KULLANICIADI","VT_ŞİFRE");

$SqlSorgusu     = "SELECT * FROM wwphpjQuerySortable ORDER BY `position` ASC";

$st 		= $db->prepare($SqlSorgusu);

$st->execute();

$Veriler 	= $st->fetchAll(PDO::FETCH_ASSOC);
?>
<body>

	<div class="container">
	  <h2>wwPHP.com jQuery Sürükle Bırak ile Sıralama Örneği</h2>
	  <p>Aşağıda listede bulunan nesneleri sol tarafta bulunan sürükleme işaretinin üzerine tıklayarak liste sırasını değiştirebilirsiniz.</p>
	</div>
	  
	<div class="container">
		<pre> 
			<div id="Bilgi"></div> 
		</pre> 
	  <ul id="Siralanabilir-Liste" class="list-group list-group-flush">
	  
	  <?php foreach($Veriler as $Veri) { ?>
	  
		<li id="Item_<?php ECHO $Veri["id"]; ?>" class="list-group-item">
			<div class="row">
				<div class="col-4">
					<div class="row">
						<div class="col-2" style="border-right:1px solid black; text-align:center;">
							<img src="img/drag-icon.png" alt="move" width="16" height="16" class="handle SurukleIco" />
						</div>
						<div class="col-10" style="border-right:1px solid black;"><?php ECHO $Veri["title"]; ?></div>
					</div>
				</div>
				<div class="col-8"><div class="col-12"><?php ECHO $Veri["description"]; ?></div></div>
			</div>
		</li>
		
		<?php } ?>
		
	  </ul>
	</div>

</body>
<script type="text/javascript"> 
$(document).ready(function() { 
  $("#Siralanabilir-Liste").sortable({ 
    handle : '.handle', 
    update : function () { 
      var order = $('#Siralanabilir-Liste').sortable('serialize'); 
	  $("#Bilgi").html("<img src='img/load.gif' alt='uygulanıyor...' />");
      $("#Bilgi").load("siralama-islem.php?"+order); 
    } 
  }); 
}); 
</script>
</html>

<!DOCTYPE html>

<head>

<title>jQuery Sürükle Bırak ile Sıralama Örneği</title>

<style>

.SurukleIco

{

cursor: move;

}

</style>

</head>

<?php

$db = new PDO("mysql:dbname=VT_ADI;host=localhost","VT_KULLANICIADI","VT_ŞİFRE");

$SqlSorgusu = "SELECT * FROM wwphpjQuerySortable ORDER BY `position` ASC";

$st = $db->prepare($SqlSorgusu);

$st->execute();

$Veriler = $st->fetchAll(PDO::FETCH_ASSOC);

<body>

<h2>wwPHP.com jQuery Sürükle Bırak ile Sıralama Örneği</h2>

<p>Aşağıda listede bulunan nesneleri sol tarafta bulunan sürükleme işaretinin üzerine tıklayarak liste sırasını değiştirebilirsiniz.</p>

</div>

<pre>

</pre>

<?php foreach($Veriler as $Veri) { ?>

<li id="Item_<?php ECHO $Veri["id"]; ?>" class="list-group-item">

</div>

</div>

</div>

</li>

<?php } ?>

</ul>

</div>

</body>

$(document).ready(function() {

$("#Siralanabilir-Liste").sortable({

handle : '.handle',

update : function () {

var order = $('#Siralanabilir-Liste').sortable('serialize');

$("#Bilgi").html("<img src='img/load.gif' alt='uygulanıyor...' />");

$("#Bilgi").load("siralama-islem.php?"+order);

}

});

</script>

</html>

Burada ‘<li id=”Item_’ kısmımızda ‘_’ dan sonra gelen değer siralama-islem.php dosyamıza yollamak istediğimiz ‘id’ değerini ifade ediyor.

4.Adım : siralama-islem.php Dosyamızı oluşturuyoruz :

<?php
sleep(1);
$db 		= new PDO("mysql:dbname=VT_ADI;host=localhost","VT_KULLANICIADI","VT_ŞİFRE", array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));
try{
	$db->beginTransaction();
	
	foreach ($_GET['Item'] as $position => $item){

		$SqlSorgusu = "UPDATE `wwphpjQuerySortable` SET `position` = :position WHERE `id` = :item";

		$st = $db->prepare($SqlSorgusu);

		$st->bindParam(':position', $position);
		
		$st->bindParam(':item', $item);
		
		$st->execute();

	}
	
	$db->commit();
	ECHO "<div style='color:green; font-size:20px;'>Sıralama Başarılı ! </div>";
}
catch (Exception $e){
	
    if ($db->inTransaction()) {
		
        $db->rollback();
		
    }
	
    ECHO "<div style='color:red; font-size:20px;'>HATA MEYDANA GELDİ ! </div>";
	
}
?>

<?php

sleep(1);

$db = new PDO("mysql:dbname=VT_ADI;host=localhost","VT_KULLANICIADI","VT_ŞİFRE", array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));

try{

$db->beginTransaction();

foreach ($_GET['Item'] as $position => $item){

$SqlSorgusu = "UPDATE `wwphpjQuerySortable` SET `position` = :position WHERE `id` = :item";

$st = $db->prepare($SqlSorgusu);

$st->bindParam(':position', $position);

$st->bindParam(':item', $item);

$st->execute();

}

$db->commit();

ECHO "<div style='color:green; font-size:20px;'>Sıralama Başarılı ! </div>";

}

catch (Exception $e){

if ($db->inTransaction()) {

$db->rollback();

}

ECHO "<div style='color:red; font-size:20px;'>HATA MEYDANA GELDİ ! </div>";

}

Bu kısımda update işlemleri bir döngünün altında gerçekleştiği için ve çoklu olduğu için Transaction kullandım, bu sayede işlemlerin herhangi birinde bir problem olduğunda döngü içerisinde o anlık yapılan tüm işlemler geri alınacaktır.

5.Adım : Kullanılan resimler :

drag-icon.png :

load.gif :

jQuery, PHP ve MySQL ile Sürükle Bırak Sıralama (Sortable)

Bu Kategorideki Diğer Yazılar

Leave a Comment Yanıtı iptal et

Bu Kategorideki Diğer Yazılar

Python, PyGame ve PyTorch ile Yapay Zekalı Yılan Oyunu Yapımı

Mikrotik İlk Yapılandırma ve Güvenlik

Python ile Transparan Proxy Sunucu Yapımı

Leave a Comment Yanıtı iptal et