Sürükle-Bırak Görev Panosu

Sürükle-Bırak Görev Panosu

PHP · MySQL · Saf JavaScript ile Kanban tarzı görev panosu. Sürükle-bırak kütüphanesi yok — motorun tamamı açıklamalı ~250 satır.

Fare · Dokunmatik · Klavye · CSRF korumalı AJAX

cilginyazilim.com

Türkçe · English

---

Dört sütun, renkli öncelik şeritleri, gecikmiş görev uyarıları ve tamamlanan işlerde üstü çizili başlıklar.

---

İçindekiler

---

Ne yapıyor?

Sütunlar arasında sürüklenebilen görev kartları. Bıraktığınız yer veritabanına yazılır; sayfayı yenilediğinizde kartlar aynı yerde durur.

• Sürükle-bırak — kartı sütun içinde yeniden sıralayın veya başka sütuna taşıyın
• Üç girdi yöntemi — fare, dokunmatik ekran ve klavye; üçü de aynı işi yapar
• Öncelik ve tarih — düşük/orta/yüksek renk kodlu, son teslim tarihi geçenler işaretlenir
• Tam CRUD — sütun bazlı hızlı ekleme, modal ile düzenleme, onaylı silme
• Anlık arama — başlık ve açıklamada, 300 ms geciktirmeli
• Veriyle şekillenen pano — sütunların adı, rengi, sırası ve "bu sütun bitmiş demek" bayrağı veritabanından gelir
• Sıfır bağımlılık — npm install yok, composer install yok. Kopyala, SQL'i içe aktar, çalıştır.

Düzenleme modalı: solda serbest metin, sağda sınıflandırma paneli.

---

Nerelerde kullanabilirsiniz?

Bu depo hem öğretici bir kaynak hem de üzerine inşa edilebilir bir temeldir. Sürükle-bırak + sıralama kalıcılığı, göründüğünden çok daha geniş bir alanda karşınıza çıkar:

Kod tarafında öğretici değeri: Sürükle-bırak motoru dışında da yeniden kullanabileceğiniz kalıplar var — CSRF korumalı AJAX uç noktası, tek dosyada toplanan action yönlendirmesi, sunucu tarafı doğrulama katmanı, iyimser güncelleme (optimistic update) ve geri alma planı, sort_order ile sıra kalıcılığı.

---

Kurulum

Gereksinimler: PHP 8.0+, MySQL 5.7+ / MariaDB 10.2+ (XAMPP, Laragon veya herhangi bir LAMP yeterli)

# 1. Dosyaları web köküne koyun
cd C:/xampp/htdocs
git clone https://github.com/CilginYazilim/todo-drag-drop.git

# 2. Veritabanını içe aktarın (cy_todo şemasını kendi oluşturur)
mysql -u root -p < todo-drag-drop/cy_todo.sql

phpMyAdmin kullanıyorsanız: İçe Aktar → Dosya seç → cy_todo.sql → Başlat

Ardından tarayıcıdan: http://localhost/todo-drag-drop/

Farklı bir veritabanı kullanacaksanız

system/config.php içindeki DB_* satırlarını düzenleyin veya sunucunuzda ortam değişkeni tanımlayın (şifreyi koda yazmamak için tercih edilen yol):

DB_HOST=127.0.0.1   DB_NAME=cy_todo   DB_USER=root   DB_PASS=gizli

Canlıya alırken

Hata ayıklama kendiliğinden kapanır — APP_DEBUG sabit true değildir, ortama bakar: yerel adreslerde (localhost, 127.0.0.1, .test, .local) açık, gerçek bir alan adında kapalıdır. İstediğiniz zaman APP_DEBUG ortam değişkeniyle bunu elle de belirleyebilirsiniz.

---

Hangi dosya ne işe yarıyor?

todo-drag-drop/
├── index.php                 ← Arayüz iskeleti + modallar (pano BOŞ çizilir)
├── cy_todo.sql               ← Veritabanı kurulumu ve örnek pano
│
├── system/
│   ├── .htaccess             ← config/function dosyalarına doğrudan HTTP erişimini kapatır
│   ├── config.php            ← Oturum, ayarlar, sabitler, PDO bağlantısı
│   ├── function.php          ← Yardımcılar: CSRF, doğrulama, veri erişimi, biçimleme
│   └── ajax.php              ← JSON uç noktası: pano, ekle/düzenle/sil, taşı
│
└── assets/
    ├── css/
    │   ├── bootstrap.min.css ← Temel çatı
    │   ├── cilginyazilim.css ← MARKA TASARIM KALIBI (tüm CY projelerinde ortak)
    │   └── style.css         ← Yalnızca bu sayfaya özel: pano, kart, sürükleme durumları
    ├── js/
    │   ├── jquery-3.7.0.js
    │   ├── bootstrap.bundle.js
    │   └── board.js          ← SÜRÜKLE-BIRAK MOTORU + tüm arayüz mantığı
    └── images/
        ├── logo.png
        └── screenshot*.png

Katmanlar arasındaki iş bölümü

function.php neden config.php'yi dahil etmiyor? Veritabanına ihtiyaç duyan fonksiyonlar PDO nesnesini parametre olarak alır (fetch_board($db)). Böylece her çağrıda yeni bağlantı açılmaz ve fonksiyonlar tek başına test edilebilir kalır. (Bağımlılık enjeksiyonu)

Pano neden PHP ile değil JavaScript ile çiziliyor? Kartlar sürüklendikçe, eklendikçe ve silindikçe pano sürekli yeniden çizilir. Aynı kart HTML'ini bir PHP'de bir JavaScript'te iki kez yazmak, ikisinin zamanla ayrışması demektir. Tek bir çizim yeri bu riski ortadan kaldırır.

Öne çıkan fonksiyonlar

---

Sürükle-bırak nasıl çalışıyor?

Neden hazır kütüphane yok?

SortableJS veya jQuery UI kullanmak gerçek bir projede gayet makuldür. Ama sürükle-bırak, "nasıl çalıştığı anlaşılmadan kullanılan" özelliklerin başında gelir. Buradaki motor üç şeyi öğretir: imleç takibi, bırakma hedefinin bulunması ve sıranın kalıcı hâle getirilmesi. Bir kez okuduğunuzda, hazır kütüphaneyi de bilerek kullanırsınız.

Neden HTML5 draggable değil, Pointer Events?

Tarayıcıların yerleşik draggable API'si dokunmatik cihazlarda çalışmaz ve sürüklenen öğenin görünümü üzerinde neredeyse hiç denetim vermez. Pointer Events fare, dokunmatik ve kalemi tek olay kümesinde birleştirir: bir kez yazarsınız, üçünde de çalışır.

Üç aşama

pointerdown → başlangıç noktasını kaydet (henüz sürükleme YOK)
pointermove → 5px eşik aşılınca başlat, hedefi bul, kartı oraya taşı
pointerup   → yeni sırayı sunucuya yaz

Kartın kendisi yer tutucudur. Ayrı bir placeholder elemanı üretmek yerine, sürüklenen kartın ta kendisini DOM içinde gezdiririz; parmağın altında görünen şey onun bir kopyasıdır (ghost). Böylece bırakma anında yapılacak iş kalmaz — kart zaten doğru yerdedir.

Ekleme noktası nasıl bulunur? Sütundaki her kartın dikey orta noktasına bakılır. İmleç bir kartın orta noktasının üstündeyse kart ondan önce, değilse sonra gelir. Bu basit kural, kartlar farklı yüksekliklerde olsa bile doğru çalışır.

Üç kritik ayrıntı

Klavye erişimi

Sürükle-bırak yalnızca fare/parmakla kullanılabilen bir özelliktir. Klavye alternatifi yazmamak, özelliği bazı kullanıcılar için tamamen erişilemez kılar. Karta odaklanın ve:

Ctrl bilinçli olarak zorunludur: yalnızca ok tuşları kullanılsaydı, kartlar arasında gezinmek isteyen klavye kullanıcısı istemeden panoyu yeniden düzenlerdi.

---

Sıralama nasıl saklanıyor?

tasks.sort_order sütununda; her sütun kendi içinde 0'dan başlayarak numaralanır.

İstemci ne gönderir? Taşınan kartın id'si, bırakıldığı sütun ve o sütundaki tüm kartların yeni sırası. Tek bir kartın konumunu bildirmek, sunucunun geri kalan kartları nasıl kaydıracağını tahmin etmesini gerektirirdi. Tarayıcı zaten doğru sırayı ekranda tutuyor; onu olduğu gibi göndermek hem daha basit hem de ekranla veritabanının ayrışmasını imkânsız kılar.

Neden kesirli sayı (0.5 gibi araya sıkıştırma) yok? Kesirli yaklaşım tek satır güncellemesiyle daha hızlıdır ama zamanla hassasiyet tükenir ve yeniden numaralandırma gerekir. Sütun başına birkaç yüz kart için tamsayıları tek transaction'da yeniden yazmak hem basit hem yeterince hızlıdır ve her zaman tutarlıdır.

İyimser güncelleme. Kart, sunucunun onayı beklenmeden ekranda yeni yerine taşınır — beklemek her bırakmada gözle görülür bir donma yaratırdı. Karşılığında bir söz verilir: istek başarısız olursa pano sunucudan yeniden yüklenip ekran gerçeğe döndürülür.

İyimser güncellemeyi geri alma planı olmadan kullanmak, kullanıcıya yalan söylemektir.

---

API uç noktaları

Hepsi POST system/ajax.php adresine gider, hepsi csrf_token ister, hepsi JSON döner.

Yanıt biçimi her zaman aynıdır — istemcinin tek bir hata gösterme yolu olması için:

{ "success": true,  "type": "success", "description": "Görev eklendi.", "id": 13 }
{ "success": false, "type": "danger",  "description": "Lütfen formdaki hataları düzeltin.",
  "errors": { "title": "Görev başlığı en az 3 karakter olmalıdır." } }

Kullanılan HTTP kodları: 200 başarılı · 400 geçersiz istek · 403 CSRF geçersiz · 404 kayıt yok · 405 POST değil · 422 doğrulama hatası · 500 sunucu hatası

Neden 419 değil de 403? Bazı çerçeveler CSRF hatası için 419 kullanır. Ancak 419 IANA'ya kayıtlı bir kod değildir: Apache onu tanımadığı için yanıt satırını sessizce 500 Internal Server Error olarak yeniden yazar. Sonuç, reddedilmiş bir isteğin sunucu çökmüş gibi görünmesidir. Bu depoda ölçülüp doğrulandı ve 403 Forbidden ile değiştirildi.

Neden tek dosya? Her işlem için ayrı dosya açmak yerine tek giriş noktası kullanmak, güvenlik kontrollerini (CSRF, POST zorunluluğu, hata yakalama) tek yerde toplamayı sağlar. Böylece bir kontrolü yanlışlıkla bir dosyada unutma riski kalmaz.

---

Veritabanı

İki tablo: task_columns (sütunlar) ve tasks (kartlar).

task_columns                          tasks
├── id                                ├── id
├── title       "Yapılıyor"           ├── column_id ──────┐ FK, ON DELETE CASCADE
├── accent      "#0b5cb5"             ├── title           │
├── sort_order  soldan sağa sıra      ├── description     │
└── is_done     "bu sütun = bitti"    ├── priority   ENUM(dusuk,orta,yuksek)
                        ▲             ├── due_date        │
                        └─────────────┤ sort_order   sütun İÇİNDEKİ sıra
                                      ├── created_at      │
                                      └── updated_at      │

Sütunlar neden ayrı tabloda? "Yapılacak / Yapılıyor / Tamamlandı" durumlarını görevin içinde bir ENUM olarak tutmak ilk bakışta daha basit görünür. Ama o zaman yeni sütun eklemek için ALTER TABLE gerekir ve sütun sırası, rengi, başlığı gibi bilgilere yer kalmaz. Ayrı tablo, panoyu veriyle şekillendirilebilir hâle getirir.

is_done bayrağı, sütunun adına bakarak ("Tamamlandı" mı?) karar vermenin kırılganlığını ortadan kaldırır — kullanıcı sütunu yeniden adlandırdığında hiçbir şey bozulmaz.

Bileşik indeks (column_id, sort_order), panoyu çizen sorgunun ta kendisidir: WHERE column_id = ? ORDER BY sort_order. İki sütunu tek indekste, bu sırayla tutmak MySQL'in hem filtrelemeyi hem sıralamayı indeks üzerinden yapmasını sağlar.

Tablo adı neden columns değil task_columns? columns MySQL'de ayrılmış bir kelimedir; her sorguda ters tırnak zorunluluğu getirir ve er geç unutulup hata verir.

---

Güvenlik

`

` gibi basit bir etiketin kayıt silmesi engellenir |
| Oturum çerezi | HttpOnly (JS okuyamaz) + SameSite=Lax (siteler arası POST'a eklenmez) + HTTPS'te Secure |
| Güvenlik başlıkları | CSP, X-Frame-Options: DENY (clickjacking), nosniff, Referrer-Policy |
| Beyaz liste | Öncelik "şunlar yasak" yerine "yalnızca şunlar serbest" kuralıyla doğrulanır |
| Taşıma yetkisi | order[] listesi, hedef sütunun gerçek üyeleri + taşınan kart ile sınırlanır |
| Girdi sınırları | Başlık, açıklama, arama terimi ve sütun başına kart sayısı üst sınırlıdır |
| Transaction | Taşımanın tamamı tek transaction'dadır; yarısı yazılmış bir sıralama, hiç yazılmamış olandan kötüdür |
| Dosya erişimi | system/.htaccess, ajax.php dışındaki dosyalara doğrudan HTTP erişimini reddeder |
| Hata gizleme | APP_DEBUG ortama göre kendiliğinden kapanır; canlıda tablo/sorgu adları sızmaz |
| Yabancı anahtar | Sütun silinirse görevleri de silinir (ON DELETE CASCADE); "yetim" kayıt birikmez |

Taşıma yetkisi neden ayrı bir başlık?

handle_move(), listedeki her id için UPDATE tasks SET column_id = :hedef çalıştırır. Bu liste doğrulanmasaydı, order[] içine panonun başka bir sütunundaki kartların id'leri yazılarak o kartlar da hedef sütuna çekilebilirdi — kullanıcı hiçbir şey yapmadan kartlarının yer değiştirdiğini görürdü.

Kural nettir: hedef sütunun yeni listesi yalnızca o sütunda zaten bulunan kartlardan ve sürüklenerek getirilen kartın kendisinden oluşabilir. Bu kümenin dışındaki her id sessizce atılır (pano başka bir sekmede değişmiş olabilir; isteği tümden reddetmek kullanıcıyı daha çok şaşırtırdı).

Not: Bu örnekte kimlik doğrulama yoktur — panoyu açan herkes her kartı düzenleyebilir. Çok kullanıcılı bir ortamda kullanacaksanız, oturum açma ve "bu kart bu kullanıcıya ait mi?" kontrolünü eklemeniz gerekir.

---

Özelleştirme

Yeni sütun eklemek

Kod değişikliği gerekmez, tek satır SQL yeterlidir:

INSERT INTO task_columns (title, accent, sort_order, is_done)
VALUES ('Beklemede', '#7c3aed', 4, 0);

Renk panoda, formda ve kart kenarlarında kendiliğinden görünür.

Yeni öncelik eklemek

İki yer güncellenir:

ALTER TABLE tasks MODIFY priority ENUM('dusuk','orta','yuksek','kritik') NOT NULL DEFAULT 'orta';

// system/config.php — form, doğrulama ve rozetler bu diziden beslenir
define('TASK_PRIORITIES', [
    'dusuk'  => 'Düşük',
    'orta'   => 'Orta',
    'yuksek' => 'Yüksek',
    'kritik' => 'Kritik',   // ← yeni
]);

Ardından assets/css/style.css içine .cy-priority--kritik renk kuralını ekleyin.

Ayarlanabilir sabitler

system/config.php içinde: TASK_TITLE_MIN / TASK_TITLE_MAX · TASK_DESC_MAX · SEARCH_MAX · MAX_TASKS_PER_COLUMN · APP_DEBUG

---

Lisans

MIT — dilediğiniz gibi indirip kullanabilirsiniz, ticari projelerde de serbesttir.

Katkı için depoyu çatallayın ve pull request gönderin.

---

Çılgın Yazılım

Açık kaynak, öğretici PHP örnekleri

cilginyazilim.com · github.com/CilginYazilim