PHP, Mysql ve Ajax ile Sürükle-Bırak Sıralı Listeler

Şub 15

PHP, Mysql ve Ajax ile Sürükle-Bırak Sıralı Listeler

Web uygulamalarında çoğu zaman bir listenin sıralamasını kullanıcı seçimi doğrultusunda sunmak gerekir. Favori kataplar, müzikler v.s Bu listelerdeki sıralamayı kullanıcıya göre ayarlamak için de genellikle “Yukarı Taşı”,”Aşağı Taşı”,”En Üste”,”En Alta” gibi butonlar koyup kullanıcının her seferinde sadece bir adım atlayarak sıralamayı yapmasını isteriz. Bir başka yöntemde listedeki her satıra textbox koyup sıralamanın bu kutulardaki sayılara göre ayarlanmasıdır. Kullanıcı sıralamayı tek adımda oluşturacak olsa da hesaplama yapmak zorunda kalacağı için bu yöntem de kolay olmayacaktır.

Bu yazımızda gelişen javascript ve ajax yöntemleri sayesinde sürükle-bırak yöntemini kullanarak böyle bir sıralamayı daha kolay bir şekilde nasıl yapabileceğimizi göreceğiz. Listedeki bir elemanı sürükleyerek sırasının değiştirilmesini, bıraktığımızda ise veritabanına listedeki yeni sırasının kaydedilmesini sağlayacağız. Tüm işlemleri (sürükle-bırak, efektler, ajax ile veri kaydı) Prototype ve Scriptaculous js frameworklerinden faydalanarak yapacağız.

Uygulamamızda genel olarak yapacağımız işlemler sırasıyla;

VT tablosunun oluşturulması-veri eklenmesi
Verilerin listelenmesi
Sürükle-bırak olayının aktif edilmesi
Sürükle-bırak olayı sonucu oluşan yeni sıralamanın kaydedilmesi

olacak.

Öncelikle uygulamamız için kullanacağımız tablomuzu oluşturacağız. Tabloyu sıralamasını yapacağımız verileri almak ve bu verilerin sırasını kayıt etmek için kullanacağız. Uygulamamız için örnek veri olarak editörleri kullanacağız.

Sorgu:

CREATE TABLE editor (id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
adi VARCHAR(255) NOT NULL,
sira INT NOT NULL
);

INSERT INTO editor (adi) VALUES ('Zend Studio');
INSERT INTO editor (adi) VALUES ('Quanta++');
INSERT INTO editor (adi) VALUES ('NotePad++');
INSERT INTO editor (adi) VALUES ('EditPlus');
INSERT INTO editor (adi) VALUES ('Aptana Studio');
INSERT INTO editor (adi) VALUES ('Dreamweaver');
INSERT INTO editor (adi) VALUES ('NuSphere PhpED');
INSERT INTO editor (adi) VALUES ('NotePad :)');

Tablo yapımızı basit bir şekilde hazırladık. Editore ait tekil id için “id”, editorün adını tutmak için “adi”, sırasını belirleyeceğimiz alan için ise “sira” alanlarını oluşturduk ve tablomuza örnek verilerimizi ekledik.

Sıra geldi tablomuzdaki bu verileri sayfamızda listelemeye. Verileri tablodan çekip sayfamızda uygun bir şekilde listeleyeceğiz.

ayar.php

<?php
define('TITLE','Lampforweb - Sürükle&amp;Bırak Sıralı Liste');
define('BASLIK','PHP Editörleri');
define('HOST','localhost');
define('USER','root');
define('PASS','');
define('VT','lampforweb');
?>

veritabani.php

<?php
function vt_baglanti()
{
	$link = mysql_connect(HOST,USER,PASS);
	if (!$link) return false;
	return mysql_select_db(VT);
}
?>

editor.php

<?php
function editorler()
{
	$sorgu  = 'SELECT id, adi FROM editor ORDER BY sira, LOWER(adi)';
	$sonuc  = mysql_query($sorgu);$editorler = array();
	while ($bilgi = mysql_fetch_object($sonuc))
	{
		$editorler[$bilgi->id] = $bilgi->adi;
	}
	return $editorler;
}
?>

index.php

<?php
require_once('ayar.php');
require_once('veritabani.php');
require_once('editor.php');
 
if (!vt_baglanti())
{
	echo 'Veritabanına bağlantı kurulamadı!';
	exit();
}
 
$editorler = editorler();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<title><?=TITLE?></title>
</head>
<body>
<h2><?=BASLIK?></h2>
<ul id="editor_liste">
<?
foreach ($editorler as $id => $editor)
{
?>
	<li><?=$editor?></li>
<?
}
?>
</ul>
</body>
</html>

Uygulamamızı genel hatları ile oluşturduk. Tablomuzdaki kayıtları ekranda listelemiş olduk. Şimdi bu uygulamaya sürükle-bırak özelliği kazandırmamız gerekiyor. Eskiden olsaydı sürükle bırak özelliği gözümde çok büyürdü hatta o kadar büyürdü ki gereksiz olduğunu düşünüp kullanmaktan vazgeçerdim. Ama artık JS frameworkler var ve işlerimizi oldukça kolaylaştırıyorlar. Scriptaculous yetenekleri ve kullanım kolaylığı bakımından sevdiğim bir framework. Prototype frameworküne bağımlı çalışıyor. Scriptaculous’u indirdiğimizde prototype.js dosyası da beraberinde geliyor. Şimdi Scriptaculous frameworkünü indirelim ve index.php dosyamızın olduğu dizine scriptaculous-js-x.x.x klasörü şeklinde kopyalayalım.

Scriptaculous JS Framework 1.8.1 Sürümü

Listemizin görüntüsünü daha güzel ve kullanışlı bir hale getirmek için CSS kodlarımızı oluşturalım.

style.css

.liste {
	list-style-type : none;
	margin : 0;
}
 
.liste li {
	border : 1px solid #000;
	cursor:move;
	margin : 2px 0 2px 0;
	padding : 3px;
	background : #f7f7f7;
	border : #ccc;
	width : 400px;
}

Sayfamızdaki

elementlerini basit bir kod yardımıyla sürüklenebilir hale getireceğiz. Bunun için Sortable.create(‘editor_liste’); komutunu kullanmamız yeterli olacak. Şimdi JS ve CSS ile birlikte sayfamızı yeniden oluşturalım.

index.php

<?php
require_once('ayar.php');
require_once('veritabani.php');
require_once('editor.php');
 
if (!vt_baglanti())
{
	echo 'Veritabanına bağlantı kurulamadı!';
	exit();
}
 
$editorler = editorler();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<title><?=TITLE?></title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="scriptaculous-js-1.8.1/lib/prototype.js"></script>
<script type="text/javascript" src="scriptaculous-js-1.8.1/src/scriptaculous.js"></script>
</head>
<body>
<h2><?=BASLIK?></h2>
<ul id="editor_liste" class="liste">
<?
foreach ($editorler as $id => $editor)
{
?>
	<li id="editor_<?=$id?>"><?=$editor?></li>
<?
}
?>
</ul>
<script type="text/javascript">
	Sortable.create('editor_liste');
</script>
</body>
</html>

Burada dikkat etmemiz gereken önemli bir nokta var.

elementine id değerini verirken mutlaka arada “_” (altçizgi) karakteri kullanılmalı. Aksi taktirde değişkenlere değer ataması yapılamıyor. Gördüğünüz gibi kolay bir şekilde sürükle-bırak bir listeye sahip olduk. Şimdi bu listedeki değişikliklerin veritabanına kaydedilmesini sağlamalıyız.

Verileri kaydetmeden önce isterseniz değişkenlerin yapısını, verilerin ne şekilde gönderildiğini görelim. Bunu için index.php dosyamızı aşağıdaki gibi değiştiriyoruz.

index.php

<?php
require_once('ayar.php');
require_once('veritabani.php');
require_once('editor.php');
 
if (!vt_baglanti())
{
	echo 'Veritabanına bağlantı kurulamadı!';
	exit();
}
 
$editorler = editorler();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<title><?=TITLE?></title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="scriptaculous-js-1.8.1/lib/prototype.js"></script>
<script type="text/javascript" src="scriptaculous-js-1.8.1/src/scriptaculous.js"></script>
</head>
<body>
<h2><?=BASLIK?></h2>
<ul id="editor_liste" class="liste">
<?
foreach ($editorler as $id => $editor)
{
?>
	<li id="editor_<?=$id?>"><?=$editor?></li>
<?
}
?>
</ul>
<p id="sira_degisiyor"></p>
<p id="sira_degisti"></p>
<script type="text/javascript">
	var changeEffect;
	Sortable.create('editor_liste', {
		onChange: function(item) {
			var list = Sortable.options(item).element;
			$('sira_degisiyor').update(Sortable.serialize(list).escapeHTML());
			if (changeEffect) changeEffect.cancel();
			changeEffect = new Effect.Highlight('sira_degisiyor',
			{ restorecolor: 'transparent' });
		},
		onUpdate: function(list) {
			$('sira_degisti').update(Sortable.serialize(list).escapeHTML());
			$('sira_degisti').highlight({ startcolor: '#99ff99' });
		}
	});
</script>
</body>
</html>

Listemizdeki elemanları sürüklemeye başladığımızda

elementinin içeriğinin değiştiğini göreceksiniz. Liste elemanını sürüklemeyi bıraktığınızda ise

elementinin içeriğinin değiştiğini göreceksiniz. Sürükleme işlemine başladığımızda onChange olayı, sürükleme işlemini tamamladığımızda onUpdate olayı gerçekleşiyor. Bu olaylara göre de ne yapmak istediğimizi belirleyip gerekli kodu yazabiliriz. Biz şimdilik sadece onUpdate olayını kullanacağız. onChange veya on Update olayları gercekleştiğinde ekranda aşağıdaki gibi bir çıktı göreceğiz.

editor_liste[]=8&amp;editor_liste[]=4&amp;editor_liste[]=5&amp;editor_liste[]=7&amp;editor_liste[]=6&amp;editor_liste[]=3&amp;editor_liste[]=2&amp;editor_liste[]=1

Gelelim verileri kaydetme işlemine. Bunun için editor.php dosyamıza sira_kaydet() fonksiyonunu ekliyoruz.

editor.php

...
...

function sira_kaydet($key)
{
	if (!isset($_POST[$key]) || !is_array($_POST[$key])) return;
	$editorler = editorler();
	$sira = 1;
	foreach ($_POST[$key] as $editor_id)
	{
		if (!array_key_exists($editor_id, $editorler)) continue;
		$sorgu = sprintf('update editor set sira = %d where id = %d',
		$sira,
		$editor_id);
		mysql_query($sorgu);
		$sira++;
	}
}

Yeni eklediğimiz fonksiyonu kullanmak ve kayit işlemini yaptırmak için kayit.php dosyamızı oluşturuyoruz.

kayit.php

<?php
require_once('ayar.php');
require_once('veritabani.php');
require_once('editor.php');
 
if (!vt_baglanti()) exit();
 
sira_kaydet('editor_liste');
?>

Kayıt işlemleri de tamamlandı. Şimdi index.php dosyamıza son halini vermemiz gerekiyor. Daha önce değişken durumlarını görmek için eklediğimiz kodları kaldırıp onUpdate olayı gerçekleştiğinde kayit işlemini tetikleyecek olan kodlarımızı yazıyoruz. (onChange olayı ile ilgili bir işleme ihtiyaç duyarsanız önceki koddan faydalanabilirsiniz.)

index.php

<?php
require_once('ayar.php');
require_once('veritabani.php');
require_once('editor.php');
 
if (!vt_baglanti())
{
	echo 'Veritabanına bağlantı kurulamadı!';
	exit();
}
 
$editorler = editorler();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<title><?=TITLE?></title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="scriptaculous-js-1.8.1/lib/prototype.js"></script>
<script type="text/javascript" src="scriptaculous-js-1.8.1/src/scriptaculous.js"></script>
</head>
<body>
<h2><?=BASLIK?></h2>
<ul id="editor_liste" class="liste">
<?
foreach ($editorler as $id => $editor)
{
?>
	<li id="editor_<?=$id?>"><?=$editor?></li>
<?
}
?>
</ul>
<script type="text/javascript">
function liste_sirala()
{
	var options = {
		method : 'post',
		parameters : Sortable.serialize('editor_liste'),
		onComplete : function(request) {
			alert('Sıralama Değiştirildi!');
		}
	};
	new Ajax.Request('kayit.php', options);
}
Sortable.create('editor_liste', { onUpdate : liste_sirala });
</script>
</body>
</html>

İşte bu kadar ! Gayet kullanışlı bir sıralama uygulaması oluşturduk. Şimdi son bölümde neler yaptık onlara bakalım.

onUpdate olayı ile tetiklenecek olan liste_sirala() JS fonksiyonunu ekledik. Fonksiyonun içerisinde prototype frameworkünün Ajax nesnesini kullandık. Ajax.Request fonksiyonu ile kayit.php dosyasına gerekli parametrelerle bir istekte bulunduk. kayit.php dosyası gelen değerlerin tabloya kaydını gerçekleştirdi. Bu durumda Ajax.Request fonksiyonunda oComplate olayı gerçekleşti ve ‘Sıralama Değiştirildi!’ mesajı çıktı. Siz isterseniz farklı yöntemler veya Ajax nesnesi ile ilgili diğer fonksiyonlar ve detaylar için buradan faydalanabilirsiniz.

Online Demo

10 Yorum “PHP, Mysql ve Ajax ile Sürükle-Bırak Sıralı Listeler”

PHP ve Ajax ile S Diyor:
Şubat 22nd, 2008 15:11
[...] Web 2.0′la birlikte kullan
@hmed Diyor:
Mart 31st, 2008 16:21
evet süper bi script üzerinde çalışılıp geliştirilirse çok dehşet şeyler yapılabilir.Paylaşım için teşekkürler
Lütfü KAR Diyor:
Nisan 29th, 2008 01:46
gerçekten çok kullanışlı bir işlev oluşturuyor sistemlerde.

yanlız bunu e-ticaret sitem için kullanmak istiyorum ve yaklaşık 10 gündür araştırmasını yapıyorum henuz bi yere varmadım bana yardımcı olurmusunuz veya buradaki yaptıgınızdan farklı olarak ne yapmamız gerekir,lütfen bana bu konuda yardımcı olursanız size gerçekten çok minnettar olurum
admin Diyor:
Nisan 29th, 2008 13:48
Buradaki örnek basit olarak sıralama işlemlerinde işinize yarayabilir. E-ticaret projesinde alışveriş sepeti mantığında kullanmak istiyorsunuz anladığım kadarıyla. http://demo.script.aculo.us/shop adresindeki örnekten faydalanabilirsiniz.
meki Diyor:
Haziran 11th, 2008 17:31
abi dedkleriniz gibi yaptım ama hata alıyorum

Fatal error: Call to undefined function editorler() in C:\AppServ\www\ajax\index.php on line 12
admin Diyor:
Kasım 5th, 2008 15:25
Merhaba meki;
Sanırım include dosyalarından birini gözden kaçırmışsın. editor.php dosyasını oluşturmayı unutmuş olabilirsin. yada dogru dizinde oluşturmamış olabilirsin. editor.php dosyasını yukarıdaki gibi oluşturup aynı dizine koyarsan sorun düzelecektir.
sibel Diyor:
Ocak 31st, 2009 09:17
arkadaşlar bana mysql de yapılmış. örnek bir program lazım. hocam istiyor. bana yardım ede bilirmisiniz. son gün 3 şubat 2009 tarihine kadar yardımlarınızı bekliyorumm. msne me mail atabilirsiniz apmış olduğunuz proğraları tşk. msn adresim. akkul249@hotmail.com
Aykut Diyor:
Mart 11th, 2009 21:10
öncelikle teşekkürler fakat bir problemim var.
bunu sessionla her kullanıcıda sıfırlanacak şekilde nasıl yaparım.
Bir türlü mantık oluşturamadım.YAardım ederseniz sevinirim
admin Diyor:
Nisan 7th, 2009 10:16
Verilen örnekteki sira_kaydet fonksiyonununda yapacağınız düzenlemeler ile her kullanıcı için ayrı sıralama tutabilirsiniz. Bunun için veritabanında da düzenlemeler yapmanız gerekecek.
kadir kılıç Diyor:
Haziran 20th, 2009 21:30
$sorgu = ‘SELECT * FROM personel where personelkat=”$pkat” ORDER BY sira, LOWER(adisoyadi)’;

şeklinde yazdığımda bir sonuç çıkartmıyor. oysa ben personelin kategorisine göe sıraltma yapmak istiyorum get ile personel kategori id alıyorum $pkat değişikenine atıyorum. hatta echo ile kontrol ettim. gözüküyor. ama sonuç çıkmıyor. bunu nasıl halledebilirim.
bu arada süper bir makale sağol. sayenizde sıraltmayı yapıp kaydetdiyorum. ilginiz için şimdiden teşekkürler

Yorum Yaz

Son Yorumlar

Recep Yüksel: Çok güzel gerçekten teşekkür ediyorum.....
evren: çok teşekkür ederim bu kodlar için. gerçekten işime çok yara...
admin: XAMPP bir sunucu değil. Sadece apache php mysql kurulumların...
boranjudge: teşekkürler oldu....
Deniz: XAMPP IIS gibi bir sunucu mu yoksa Personal Web Server tarzı...

LAMP for WEB