Django

🚀 الدرس 2 من مشروع Django – إنشاء لوحة تحكم احترافية (Dashboard UI) باستخدام Bootstrap

صورة
Tamer Ahmed
اخر تحديث :

في هذا الدرس سنحوّل المشروع من صفحة بسيطة إلى لوحة تحكم Admin Dashboard كاملة تحتوي على:

  • Navbar علوية
  • Sidebar جانبية
  • تصميم متجاوب بالكامل
  • Bootstrap 5
  • قالب ثابت يمكنك البناء عليه
إنشاء لوحة تحكم احترافية (Dashboard UI)

✅ الهدف من الدرس

إنشاء واجهة احترافية جاهزة لمشاريع الإدارة (مثل نظام إدارة المستخدمين – المخزون – الفواتير – المدارس …).

📌 الخطوة 1: تثبيت Bootstrap في Django

عند استخدام Bootstrap داخل Django لديك خياران:

✔️ الخيار 1 — استخدام CDN (الأسرع)

افتح ملف:

templates/base.html

وأضف داخل <head>:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

📌 الخطوة 2: إنشاء ملف القالب الأساسي base.html

هذا القالب يحتوي على:

  • Navbar
  • Sidebar
  • منطقة المحتوى

إنشئ:

project/templates/base.html

ثم أضف:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dashboard</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background: #f7f9fc;
        }
        .sidebar {
            height: 100vh;
            background: #1e293b;
            color: white;
            padding-top: 20px;
        }
        .sidebar a {
            color: #cbd5e1;
            padding: 10px 20px;
            display: block;
            text-decoration: none;
        }
        .sidebar a:hover {
            background: #334155;
        }
    </style>
</head>
<body>

<!-- NAVBAR -->
<nav class="navbar navbar-dark bg-dark px-3">
    <a class="navbar-brand" href="#">تقنيات نور التعليمية</a>
</nav>

<div class="container-fluid">
    <div class="row">

        <!-- SIDEBAR -->
        <div class="col-2 sidebar">
            <h5 class="text-center mb-4">Dashboard</h5>
            <a href="#">الرئيسية</a>
            <a href="#">إدارة المستخدمين</a>
            <a href="#">التقارير</a>
            <a href="#">الإعدادات</a>
        </div>

        <!-- MAIN CONTENT -->
        <div class="col-10 p-4">
            {% block content %}
            {% endblock %}
        </div>

    </div>
</div>

</body>
</html>

📌 الخطوة 3: إنشاء صفحة Dashboard الرئيسية

أنشئ ملف:

templates/dashboard.html

وأضف:

{% extends "base.html" %}
{% block content %}
<h2 class="mb-4">لوحة التحكم</h2>

<div class="row">
    <div class="col-md-4">
        <div class="card shadow">
            <div class="card-body">
                <h5>عدد المستخدمين</h5>
                <p class="fs-3 fw-bold text-primary">120</p>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="card shadow">
            <div class="card-body">
                <h5>عدد الطلبات</h5>
                <p class="fs-3 fw-bold text-success">85</p>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="card shadow">
            <div class="card-body">
                <h5>إجمالي الأرباح</h5>
                <p class="fs-3 fw-bold text-danger">$5400</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

📌 الخطوة 4: تعديل views.py لعرض الصفحة

افتح:

main/views.py

وأضف:

from django.shortcuts import render

def dashboard(request):
    return render(request, "dashboard.html")

📌 الخطوة 5: ضبط المسار URL

افتح:

main/urls.py

وأضف:

from django.urls import path
from .views import dashboard

urlpatterns = [
    path('', dashboard, name="dashboard"),
]

🎉 النتيجة النهائية

حصلت الآن على:

✔ Dashboard احترافية
✔ Navbar
✔ Sidebar
✔ Bootstrap 5
✔ صفحات ممتدة من قالب واحد (base.html)
✔ تصميم يشبه لوحات التحكم المدفوعة

🧩 تمرين الدرس الثاني

✨ التمرين:

قم بإضافة 3 صفحات حقيقية في الـ Sidebar:

  1. صفحة "إدارة المستخدمين"
  2. صفحة "التقارير"
  3. صفحة "الإعدادات"

مع إنشاء ملفات القوالب (templates) وربطها بالسيرفر (views + urls).

سنقوم بتنفيذ المطلوب بالكامل:

  • إنشاء 3 صفحات جديدة
  • رابطها في الـ sidebar
  • إنشاء views
  • إنشاء urls
  • تنظيم القوالب templates

✅ 1. تحديث القائمة الجانبية (Sidebar) في base.html

افتح ملف:

templates/base.html

واستبدل جزء الروابط بالآتي:

<div class="col-2 sidebar">
    <h5 class="text-center mb-4">Dashboard</h5>
    <a href="{% url 'dashboard' %}">الرئيسية</a>
    <a href="{% url 'users' %}">إدارة المستخدمين</a>
    <a href="{% url 'reports' %}">التقارير</a>
    <a href="{% url 'settings' %}">الإعدادات</a>
</div>

✅ 2. إنشاء الصفحات الجديدة (Templates)

أنشئ الملفات التالية في مجلد:

project/templates/

📄 users.html

{% extends "base.html" %}
{% block content %}
<h2 class="mb-4">إدارة المستخدمين</h2>

<div class="card shadow">
    <div class="card-body">
        <p>هذه الصفحة مخصصة لعرض معلومات المستخدمين والتحكم بهم.</p>
    </div>
</div>
{% endblock %}

📄 reports.html

{% extends "base.html" %}
{% block content %}
<h2 class="mb-4">التقارير</h2>

<div class="card shadow">
    <div class="card-body">
        <p>هنا يمكنك استعراض التقارير والإحصائيات الخاصة بالنظام.</p>
    </div>
</div>

{% endblock %}

📄 settings.html

{% extends "base.html" %}
{% block content %}
<h2 class="mb-4">الإعدادات</h2>

<div class="card shadow">
    <div class="card-body">
        <p>هذه الصفحة مخصصة للتحكم في إعدادات التطبيق ولوحة التحكم.</p>
    </div>
</div>

{% endblock %}

✅ 3. تحديث views.py

افتح ملف:

main/views.py

وأضف الدوال التالية:

from django.shortcuts import render

def dashboard(request):
    return render(request, "dashboard.html")

def users(request):
    return render(request, "users.html")

def reports(request):
    return render(request, "reports.html")

def settings(request):
    return render(request, "settings.html")

✅ 4. تحديث urls.py

افتح ملف:

main/urls.py

واجعله كالتالي:

from django.urls import path
from .views import dashboard, users, reports, settings

urlpatterns = [
    path('', dashboard, name="dashboard"),
    path('users/', users, name="users"),
    path('reports/', reports, name="reports"),
    path('settings/', settings, name="settings"),
]

🎉 النتيجة النهائية

الآن أصبح لديك لوحة تحكم كاملة تحتوي على:

✔ الرئيسية
✔ إدارة المستخدمين
✔ التقارير
✔ الإعدادات

جميعها تعمل وتنتقل بينها بسهولة عبر الـ sidebar ✨

التصميم احترافي ومتجاوب ويعتبر أساسًا ممتازًا لتطوير نظام إدارة كامل باستخدام Django.

تعديل المقال
الأقسام

مقالات قد تهمك

تعليقات