PHP ve JQuery Sürükle Bırak ile Sıralama

Yazan Tarih 27 Ocak, 2015 Yorum yapılmamış

Ürünlerimizin, yazdığımız yazılarımızın bizim tercihimize göre sıralanması bazen ihtiyaç olabiliyor.

Bu işlemin nasıl yapılacağına dair örnekli olarak aşağıda açıklamaya çalışacağım.

JQuery kütüphanesindeki sortable fonksiyonunuyla Ajax methoduyla PHP sayfamızda sıralama işlemi yapacağız.

Örnek konumuz olarak e-ticaret sitelerindeki “Sık Sorulan Sorular” kısmını yapıyor olacağız.

Yazıma veritabanımızın örneğiyle başlamak istiyorum.

Icerik-Tablo
Basit haliyle listeleme sayfamızın ve Jquery ile sıralama işleminin kodlaması


<?php
include('db.php'); // Veritabanı bağlantısı

$query = 'SELECT * FROM icerik WHERE icerikDurum = "0" ORDER BY icerikSira';
$result = mysql_query($query);

$toplamKayit = mysql_num_rows($result);
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>İçerik Listesi</title>
<script src="js/jquery-1.11.2.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
</head>
<body>

<table width="100%" border="1" cellspacing="0" cellpadding="0">
	<tr>
		<th width="13">#</th>
		<th>İçerik Adı</th>
	</tr>
	<tbody id="sortable">
		<?php if ( $toplamKayit ){ $sayac = 0;?>
			<?php while( $value = mysql_fetch_assoc($result) ){ $sayac++;?>
				<tr id="item-<?php echo $value['icerikID']?>">
					<td class="sortable">
						<?php echo $sayac;?>
					</td>
					<td>
						<h3>
							<?php echo $value['icerikAdi'];?>
						</h3>
					</td>
				</tr>
			<?php }?>
		<?php } else {?>
			<tr>
				<td colspan="6">Listelenecek içerik bulunmamaktadır.</td>
			</tr>
		<?php }?>
	</tbody>
</table>

<style type="text/css">
	.sortable { cursor: move; }
</style>
<script type="text/javascript">
$(function() {
	$( "#sortable" ).sortable({
		revert: true,
		handle: ".sortable",
		stop: function (event, ui) {
			var data = $(this).sortable('serialize');

			$.ajax({
				type: "POST",
				dataType: "json",
				data: data,
				url: "ajax.php?p=urunSirala",
				success: function(msg){
					alert( msg.islemMsj );
				}
			});
		}
	});
	$( "#sortable" ).disableSelection();
});
</script>

</body>
</html>

Güncelleme işlemini yaptığımız ajax.php dosyamızın kodları


<?php
include('db.php'); // Veritabanı bağlantısı

if ( isset($_GET['p']) ){
	if ( $_GET['p'] == 'urunSirala' ){
		if ( is_array($_POST['item']) ){
			foreach ( $_POST['item'] as $key => $value ){
				$query = 'UPDATE icerik SET icerikSira = "'.$key.'" WHERE icerikID = "'.$value.'"';
				mysql_query($query);
			}
			$returnMsg = array( 'islemSonuc' => true , 'islemMsj' => 'İçeriklerin sırala işlemi güncellendi' );
		} else {
			$returnMsg = array( 'islemSonuc' => false , 'islemMsj' => 'İçerik sıralama işleminde hata oluştu' );
		}
	}
}

if ( isset($returnMsg) ){
	echo json_encode($returnMsg);
}
?>

Yukarı yaptığımız basit haliyle listeleme yaptığımız içeriğin sıralanmasıydı. Kullanım amacına bağlı olarak istediğiniz şekilde ihtiyacınızı karşıyalabilirsiniz.

Uygulama Örnek Sayfası

Jquery Sortable Uygulamasını İndir

*İndirilebilir örnek dosyamızda sql ve php dosyaları mevcuttur.

Paylaş:

Etiket