Django Unfold ile Modern Yönetim Paneli
Django'nun varsayılan yönetim paneli işlevsel olarak çok güçlü olsa da, görsel açıdan günümüz standartlarının biraz gerisinde kalabiliyor. Django Unfold, Tailwind CSS kullanarak bu paneli modern, şık, mobil uyumlu ve "Dark Mode" (karanlık mod) destekli bir arayüze dönüştüren harika bir kütüphanedir.
Aşağıda, Django Unfold'u projenize entegre etmeniz ve özelleştirmeniz için adım adım hazırladığım kapsamlı eğitim makalesini bulabilirsiniz.
1. Neden Django Unfold?
Tailwind CSS: Modern ve esnek bir tasarım altyapısı sunar.
Karanlık Mod (Dark Mode): Kullanıcı dostu ve göz yormayan bir arayüz deneyimi sağlar.
Gelişmiş Özelleştirme: Özel dashboard'lar, menüler ve renk paletleri oluşturmak çok kolaydır.
Modern İkonlar: Material Symbols entegrasyonu ile menülerinizi görselleştirebilirsiniz.
2. Kurulum
Öncelikle aktif olan sanal ortamınızda (virtual environment) aşağıdaki komutu çalıştırarak django-unfold paketini yükleyin:
pip install django-unfold
3. Ayar Dosyasının (settings.py) Yapılandırılması
Unfold'un Django admin panelinin üzerine yazabilmesi için INSTALLED_APPS listenizin en üstüne eklenmesi çok önemlidir.
settings.py dosyanızı açın ve aşağıdaki gibi düzenleyin:
INSTALLED_APPS = [
# Unfold uygulamaları en üstte olmalıdır
"unfold",
"unfold.contrib.filters", # Opsiyonel: Gelişmiş filtreler için
"unfold.contrib.forms", # Opsiyonel: Gelişmiş form elemanları için
"unfold.contrib.inlines", # Opsiyonel: Gelişmiş inline formlar için
# Varsayılan Django uygulamaları
"django.contrib.admin",
"django.contrib.auth",
"django.contrib.contenttypes",
"django.contrib.sessions",
"django.contrib.messages",
"django.contrib.staticfiles",
# Sizin kendi uygulamalarınız
# "myapp",
]
4. Modelleri Unfold ile Kaydetmek (admin.py)
Django'nun varsayılan admin.ModelAdmin sınıfı yerine Unfold'un sunduğu sınıfı kullanmamız gerekiyor. Kendi uygulamanızın (örneğin myapp) içindeki admin.py dosyasını şu şekilde güncelleyin:
from django.contrib import admin
from unfold.admin import ModelAdmin
from .models import MyModel
@admin.register(MyModel)
class MyModelAdmin(ModelAdmin): # django.contrib.admin.ModelAdmin YERİNE bunu kullanıyoruz
list_display = ("name", "created_at", "status")
search_fields = ("name",)
list_filter = ("status",)
Bu değişikliği yaptıktan sonra sunucunuzu çalıştırın (python manage.py runserver). Admin paneline giriş yaptığınızda modern Unfold arayüzüyle karşılaşacaksınız!
5. İleri Düzey Özelleştirme (UNFOLD Ayarları)
Unfold, settings.py içerisine eklenecek bir UNFOLD sözlüğü (dictionary) ile tamamen özelleştirilebilir. Site başlığını, logoyu, renkleri ve kenar çubuğunu (sidebar) değiştirebilirsiniz.
settings.py dosyanızın en altına aşağıdaki bloğu ekleyerek özelleştirmelere başlayabilirsiniz:
from django.templatetags.static import static
from django.urls import reverse_lazy
from django.utils.translation import gettext_lazy as _
UNFOLD = {
"SITE_TITLE": None,
"SITE_HEADER": "Benim Modern Projem",
"SITE_URL": "/",
"SITE_ICON": {
"light": lambda request: static("images/logo-light.svg"), # Kendi logonuzun yolu
"dark": lambda request: static("images/logo-dark.svg"),
},
# Tema Renkleri (Tailwind renk paleti ile uyumlu)
"COLORS": {
"primary": {
"50": "250 253 255",
"100": "240 249 255",
"200": "224 242 254",
"300": "186 230 253",
"400": "125 211 252",
"500": "56 189 248",
"600": "2 132 199", # Ana marka renginiz
"700": "3 105 161",
"800": "7 89 133",
"900": "12 74 110",
},
},
# Kenar Çubuğu (Sidebar) Yapılandırması
"SIDEBAR": {
"show_search": True, # Solda arama barı göster
"show_all_applications": True,
"navigation": [
{
"title": _("Ana Yönetim"),
"separator": True, # Menüler arası çizgi
"items": [
{
"title": _("Kullanıcılar"),
"icon": "people", # Material Symbols ikon adı
"link": reverse_lazy("admin:auth_user_changelist"),
},
{
"title": _("Gruplar"),
"icon": "group",
"link": reverse_lazy("admin:auth_group_changelist"),
},
],
},
],
},
}
Özelleştirme İpuçları:
İkonlar:
iconparametresi, Google'ın Material Symbols kütüphanesini kullanır. İstediğiniz ikonuGoogle Fonts - Material Symbols Renkler:
COLORSbölümüne girdiğiniz değerler RGB formatında boşluklu olarak (R G B) yazılmalıdır (Tailwind CSS çalışma mantığı).
Sonuç
Bu adımlarla Django projenizin yönetim panelini çağ atlatmış oldunuz. Unfold, sunduğu eklentilerle (özel WYSIWYG editörleri, grafiksel dashboard'lar vb.) çok daha geniş çaplı işler yapmanıza da olanak tanır.
Yönetim panelini sadece bir veri giriş aracı olmakla bırakmayıp projenizin nabzını tutan, şık bir kontrol merkezine (Dashboard) dönüştürmek harika bir fikir.
Django Unfold, Tailwind CSS altyapısına sahip olduğu için kendi özel verilerimizi ve grafiklerimizi panele entegre etmek oldukça keyiflidir. Bunu yapmak için Django'nun klasik "template ezme" (override) yöntemini ve Unfold'un veri gönderme mekanizmasını kullanacağız.
İşte adım adım Unfold ile istatistikli Dashboard yapımı:
1. Adım: Dashboard'a Veri Sağlayacak Fonksiyonu Yazmak
Öncelikle ekrandaki kartlarda (Toplam Kullanıcı, Satışlar vs.) göstereceğimiz verileri hesaplayıp şablona (template) gönderecek bir fonksiyona ihtiyacımız var.
Kendi uygulamanızın içine (örneğin myapp) dashboard.py adında yeni bir dosya oluşturun ve içine şu kodları ekleyin:
# myapp/dashboard.py
from django.contrib.auth.models import User
# Kendi modellerinizi de buraya import edebilirsiniz
# from .models import Order, Product vb.
def custom_dashboard_callback(request, context):
"""
Bu fonksiyon Unfold'un ana sayfasına ekstra veri göndermemizi sağlar.
"""
# Veritabanından örnek istatistikler çekiyoruz
total_users = User.objects.count()
active_users = User.objects.filter(is_active=True).count()
# Ekranın şablonuna (context) bu verileri ekliyoruz
context.update({
"total_users": total_users,
"active_users": active_users,
"monthly_revenue": "45.200 ₺", # Örnek statik veri
"active_orders": 128, # Örnek statik veri
})
return context
2. Adım: Unfold Ayarlarında Bu Fonksiyonu Tanıtmak
Oluşturduğumuz bu fonksiyonu Unfold'un kullanabilmesi için settings.py dosyasındaki UNFOLD sözlüğüne eklemeliyiz:
# settings.py içerisindeki UNFOLD ayarı
UNFOLD = {
# ... (Önceki konfigürasyonlarınız: SITE_TITLE, COLORS vb.)
# Dashboard veri sağlayıcısını (callback) buraya ekliyoruz
"DASHBOARD_CALLBACK": "myapp.dashboard.custom_dashboard_callback",
}
3. Adım: Django Şablonunu (Template) Etkinleştirmek
Özel HTML kodumuzu yazabilmek için Django'ya "kendi klasörümdeki şablonlara (templates) da bak" dememiz gerekiyor.
settings.py dosyanızda TEMPLATES ayarını bulun ve DIRS kısmına ana dizindeki templates klasörünü ekleyin:
import os
from pathlib import Path
BASE_DIR = Path(__file__).resolve().parent.parent
TEMPLATES = [
{
"BACKEND": "django.template.backends.django.DjangoTemplates",
"DIRS": [os.path.join(BASE_DIR, "templates")], # BU SATIRI GÜNCELLEYİN
"APP_DIRS": True,
# ...
},
]
4. Adım: Dashboard Tasarımını (HTML) Oluşturmak
Projenizin ana dizininde (manage.py ile aynı yerde) templates adında bir klasör oluşturun. Onun içine admin adında bir klasör daha açın ve içine index.html dosyasını oluşturun. Dosya yolu tam olarak şu olmalı: templates/admin/index.html.
Bu dosyanın içine, Tailwind CSS kullanarak hazırladığımız modern istatistik kartlarını ekliyoruz:
{% extends "admin/index.html" %}
{% load i18n %}
{% block content %}
<div class="mb-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm border border-gray-100 dark:border-gray-700">
<div class="flex items-center justify-between">
<h3 class="text-gray-500 dark:text-gray-400 text-sm font-medium">Toplam Kullanıcı</h3>
<span class="material-symbols-outlined text-primary-600">group</span>
</div>
<p class="text-3xl font-bold text-gray-900 dark:text-white mt-4">{{ total_users }}</p>
</div>
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm border border-gray-100 dark:border-gray-700">
<div class="flex items-center justify-between">
<h3 class="text-gray-500 dark:text-gray-400 text-sm font-medium">Aktif Kullanıcı</h3>
<span class="material-symbols-outlined text-green-500">verified_user</span>
</div>
<p class="text-3xl font-bold text-gray-900 dark:text-white mt-4">{{ active_users }}</p>
</div>
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm border border-gray-100 dark:border-gray-700">
<div class="flex items-center justify-between">
<h3 class="text-gray-500 dark:text-gray-400 text-sm font-medium">Aktif Siparişler</h3>
<span class="material-symbols-outlined text-orange-500">local_shipping</span>
</div>
<p class="text-3xl font-bold text-gray-900 dark:text-white mt-4">{{ active_orders }}</p>
</div>
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm border border-gray-100 dark:border-gray-700">
<div class="flex items-center justify-between">
<h3 class="text-gray-500 dark:text-gray-400 text-sm font-medium">Aylık Gelir</h3>
<span class="material-symbols-outlined text-primary-600">payments</span>
</div>
<p class="text-3xl font-bold text-gray-900 dark:text-white mt-4">{{ monthly_revenue }}</p>
</div>
</div>
{{ block.super }}
{% endblock %}
Ne Yaptık?
{% extends "admin/index.html" %}ile Unfold'un mevcut ana sayfa iskeletini aldık.{% block content %}bölümünü açarak sayfanın "İçerik" kısmının en üstüne kendi Tailwind kartlarımızı yerleştirdik. Dark mode uyumlu olması içindark:bg-gray-800gibi sınıflar kullandık.{{ block.super }}kodu sayesinde, Django'nun normalde dashboard'da gösterdiği "Uygulama listelerini" ve "Son Hareketler" bölümünü silmeden hemen kartların altına eklemiş olduk.
Bu adımları tamamlayıp Django sunucunuzu yeniden başlattığınızda (python manage.py runserver), admin anasayfasında son derece havalı ve profesyonel istatistik kartlarının sizi karşıladığını göreceksiniz!
Yönetim panelini sadece istatistiklerle değil, aynı zamanda verilerin zaman içindeki değişimini gösteren animasyonlu grafiklerle donatmak, hem profesyonel bir görünüm katar hem de verileri okumayı çok daha keyifli hale getirir. Bu yapı, özellikle blog yazılarınızda veya öğrencilerinize hazırladığınız eğitim materyallerinde görsel olarak çok dikkat çekici bir örnek olacaktır.
Dünyanın en popüler ve kullanımı kolay grafik kütüphanelerinden biri olan Chart.js'i projemize entegre edeceğiz. İşlem yine iki adımdan oluşuyor: Veriyi hazırlamak ve ekranda çizdirmek.
1. Adım: dashboard.py İçinde Grafik Verilerini Hazırlamak
Grafiğin eksenlerinde göstereceğimiz verileri (örneğin aylar ve o aylara ait kayıt sayıları) Python tarafında hazırlayıp, JavaScript'in okuyabileceği JSON formatına çevirmemiz gerekiyor.
Daha önce oluşturduğumuz myapp/dashboard.py dosyasını şu şekilde güncelleyin:
import json
from django.contrib.auth.models import User
def custom_dashboard_callback(request, context):
# Önceki istatistik verileriniz...
total_users = User.objects.count()
active_users = User.objects.filter(is_active=True).count()
# GRAFİK VERİLERİ (Örnek olarak aylık yeni kullanıcı sayıları)
# Gerçek projede bu verileri Django ORM 'annotate' ve 'TruncMonth' ile çekebilirsiniz.
aylar = ["Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran"]
kullanici_kayitlari = [50, 80, 60, 120, 90, 150]
context.update({
"total_users": total_users,
"active_users": active_users,
"monthly_revenue": "45.200 ₺",
"active_orders": 128,
# Grafik verilerini JSON formatına çevirerek template'e gönderiyoruz
"chart_labels": json.dumps(aylar),
"chart_data": json.dumps(kullanici_kayitlari),
})
return context
2. Adım: index.html Şablonuna Chart.js ve Grafik Alanını Eklemek
Şimdi templates/admin/index.html dosyamızı açıyoruz. Kartların hemen altına grafiğin görüneceği alanı (<canvas>) ve en alta da Chart.js kodlarımızı ekleyeceğiz.
Dosyanızın güncel hali şu şekilde olmalıdır:
{% extends "admin/index.html" %}
{% load i18n %}
{% block content %}
<div class="mb-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
</div>
<div class="mb-8 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm border border-gray-100 dark:border-gray-700">
<h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Aylık Yeni Kullanıcı Eğilimi</h3>
<div class="relative h-72 w-full">
<canvas id="myLineChart"></canvas>
</div>
</div>
{{ block.super }}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
const ctx = document.getElementById('myLineChart').getContext('2d');
// Django'dan gelen JSON verilerini JavaScript dizisine çeviriyoruz
// |safe filtresi, Django'nun tırnak işaretlerini bozmasını engeller
const labels = JSON.parse('{{ chart_labels|safe }}');
const data = JSON.parse('{{ chart_data|safe }}');
new Chart(ctx, {
type: 'line', // İsterseniz 'bar', 'pie' veya 'doughnut' yapabilirsiniz
data: {
labels: labels,
datasets: [{
label: 'Yeni Kayıtlar',
data: data,
borderColor: '#0ea5e9', // Tailwind CSS 'sky-500' rengi
backgroundColor: 'rgba(14, 165, 233, 0.2)', // Şeffaf mavi dolgu
borderWidth: 2,
tension: 0.4, // Çizginin köşelerini yumuşatır, dalga efekti verir
fill: true // Çizginin altını renkle doldurur
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false } // Üstteki etiketi gizler, daha temiz görünür
},
scales: {
y: {
beginAtZero: true,
grid: {
color: 'rgba(156, 163, 175, 0.2)' // Dark mode'da göz yormayan ızgara çizgileri
},
ticks: { color: '#9ca3af' } // Eksen yazıları rengi
},
x: {
grid: { display: false }, // Dikey ızgara çizgilerini kaldırır
ticks: { color: '#9ca3af' }
}
}
}
});
});
</script>
{% endblock %}
Önemli Detaylar:
|safeFiltresi: Django güvenlik gereği HTML içindeki özel karakterleri dönüştürür.{{ chart_data|safe }}kullanarak verinin bozulmadan saf JSON dizisi olarak JavaScript'e aktarılmasını garantiledik.tension: 0.4: Bu ayar, noktalar arasındaki çizginin keskin zikzaklar yerine yumuşak, estetik bir dalga şeklinde olmasını sağlar.Dark Mode Uyumu: Grafik çizgilerini ve yazı renklerini, Unfold'un karanlık ve aydınlık temalarında sırıtmaması için gri tonlarda ayarladık.
Tüm bu işlemleri kaydedip sayfayı yenilediğinizde, istatistik kartlarının hemen altında animasyonlu, şık bir çizgi grafiğin belirdiğini göreceksiniz.
Yorumlar
Yorum Gönder