في هذا الدرس سنحوّل المشروع من صفحة بسيطة إلى لوحة تحكم Admin Dashboard كاملة تحتوي على:
- Navbar علوية
- Sidebar جانبية
- تصميم متجاوب بالكامل
- Bootstrap 5
- قالب ثابت يمكنك البناء عليه
✅ الهدف من الدرس
إنشاء واجهة احترافية جاهزة لمشاريع الإدارة (مثل نظام إدارة المستخدمين – المخزون – الفواتير – المدارس …).
📌 الخطوة 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:
- صفحة "إدارة المستخدمين"
- صفحة "التقارير"
- صفحة "الإعدادات"
مع إنشاء ملفات القوالب (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.
