Tutorial bikin dashboard admin Django-Unfold dengan custom model, filter, action & KPI untuk toko online modern.
Halo kamu! Pernah ngelihat admin panel yang keren banget di aplikasi e-commerce? Nah kali ini kita akan bikin dashboard admin super canggih menggunakan Django dan Django-Unfold.
Django framework Python yang powerful banget buat bikin aplikasi web, sementara Django-Unfold itu package yang bikin tampilan admin jadi modern dan user-friendly.
Kita mulai dari install Django, Django-Unfold, dan dependency yang diperlukan. Nanti kita buat project Django baru dengan aplikasi shop untuk toko online.
Advertisement
Slot in-article yang tampil setelah paragraf ketiga.
Setelah itu kita konfigurasi Unfold dengan tema admin modern, navigasi sidebar custom, dashboard callbacks, product badges, tabs, filters, actions, dan homepage admin custom.
Kita juga definisikan model e-commerce yang realistis seperti categories, products, customers, orders, dan order items.
Database kita isi dengan sample data biar ada isinya, lalu kita launch Django server melalui Colab's proxy biar bisa akses admin panel dari browser.
Pertama-tama, install Django, Django-Unfold, dan Pillow biar environment Colab punya semua dependency yang diperlukan untuk demo admin ini.
Kita stop Django server yang jalan sebelumnya biar nggak ada conflict port. Lalu buat project Django baru, mulai app shop, dan siapin direktori template admin custom.
Di file settings.py, kita konfigurasi installed apps, middleware, pengaturan database, path static/media, dan opsi host dan CSRF yang friendly buat Colab.
Kita juga tambah setting Django-Unfold untuk custom admin title, tema warna, navigasi sidebar, tabs, dashboard callback, dan environment badge.
Di URL configuration, kita set root path redirect langsung ke admin panel biar praktis.
Untuk model, kita buat Category dengan field name, slug, parent, is_active, dan created_at.
Model Customer punya field name, email, tier (bronze/silver/gold/platinum), lifetime_value, dan joined.
Product modelnya lengkap dengan category, name, SKU, description, price, stock, status, featured, has_discount, dan discount_percent.
Order model punya number, customer, status, total, notes, dan created_at. OrderItem model untuk detail pesanan.
Di utils.py, kita buat environment callback, products badge, dan dashboard callback yang nanti muncul di homepage admin.
Dashboard callback ini bikin KPI cards buat tampilan active products, pending orders, customers, dan revenue 30 hari terakhir.
Kita juga tampilkan top categories dan order status summary di dashboard biar admin bisa lihat performa toko secara cepat.
Di admin.py, kita custom tampilan admin untuk setiap model dengan list_display, list_filter, search_fields, dan autocomplete_fields.
Kita buat custom admin actions seperti mark_paid_bulk, mark_paid_row, duplicate_order, dan save_and_ship biar admin bisa kerja lebih efisien.
Untuk ProductAdmin, kita tambahkan conditional_fields biar field discount_percent cuma muncul kalau has_discount nya True.
Kita juga custom tampilan price dan stock dengan badges yang informatif biar admin bisa lihat status produk sekilas.
Di template dashboard.html, kita tampilkan KPI cards, top categories, dan order status summary dengan layout yang rapi.
Terakhir, kita run migrations buat bikin database tables, seed database dengan sample data, dan start Django development server.
Kita verifikasi bahwa admin login page responsif, lalu generate Colab proxy link buat buka Unfold admin dashboard.
Voila! Sekarang kamu punya Django-Unfold admin interface yang fully working dengan data e-commerce sample dan dashboard experience yang polished.
Dengan Unfold, kita transform Django admin default jadi back-office system yang lebih professional dengan custom navigation, visual labels, filters, inline order items, admin actions, conditional fields, dan KPI cards.
Ini praktis banget buat bikin internal tools, admin panels, dan business dashboards dengan Django, sambil setupnya tetep simple dan Colab-friendly.
AI Updates lagi bergerak cepat, jadi jangan cuma lihat headline.
MarkTechPost
Catatan redaksi
Kalau lo cuma ambil satu hal dari artikel ini
AI Updates update dari MarkTechPost.
Sumber asli
Artikel ini merupakan rewrite editorial dari laporan MarkTechPost.
Baca artikel asli di MarkTechPost→


