(User Management Page + Dashboard احترافي)
الهدف: عدم الاعتماد فقط على Django Admin، وبناء لوحة تحكم حقيقية مخصصة مثل المشاريع الاحترافية.
🎯 أهداف الدرس
بنهاية هذا الدرس ستتعلم:
- إنشاء صفحة Dashboard مخصصة
- عرض المستخدمين داخل صفحة HTML
- التحكم في الصلاحيات (من يرى ماذا)
- حماية الصفحات بالأدوار (Admin فقط)
- استخدام Bootstrap 5 لواجهة احترافية
🧱 هيكل الملفات الجديد
dashboard/
│── views.py
│── urls.py
│── templates/
│ └── dashboard/
│ ├── dashboard.html
│ └── users.html
│── decorators.py
🛡️ الخطوة 1: إنشاء Decorator للتحقق من الدور
dashboard/decorators.py
from django.shortcuts import redirect
from django.contrib import messages
def admin_required(view_func):
def wrapper(request, *args, **kwargs):
if request.user.is_authenticated and request.user.groups.filter(name="Admin").exists():
return view_func(request, *args, **kwargs)
messages.error(request, "غير مصرح لك بالدخول")
return redirect("dashboard")
return wrapper
🧠 الخطوة 2: إنشاء View لوحة التحكم
dashboard/views.py
from django.shortcuts import render
from django.contrib.auth.decorators import login_required
from django.contrib.auth.models import User
from .decorators import admin_required
@login_required
def dashboard_home(request):
return render(request, "dashboard/dashboard.html")
@login_required
@admin_required
def users_list(request):
users = User.objects.all()
return render(request, "dashboard/users.html", {"users": users})
🌐 الخطوة 3: إعداد URLs
dashboard/urls.py
from django.urls import path
from .views import dashboard_home, users_list
urlpatterns = [
path("", dashboard_home, name="dashboard"),
path("users/", users_list, name="users"),
]
ولا تنسَ إضافتها في urls.py الرئيسي:
path("dashboard/", include("dashboard.urls")),
🎨 الخطوة 4: تصميم صفحة Dashboard
dashboard/dashboard.html
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>Dashboard</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-dark bg-dark px-4">
<span class="navbar-brand">Django Dashboard</span>
</nav>
<div class="container mt-5">
<h2>مرحبًا {{ request.user.username }}</h2>
{% if request.user.groups.first.name == "Admin" %}
<a href="{% url 'users' %}" class="btn btn-primary mt-3">
إدارة المستخدمين
</a>
{% endif %}
</div>
</body>
</html>
👥 الخطوة 5: صفحة عرض المستخدمين
dashboard/users.html
<!DOCTYPE html>
<html>
<head>
<title>Users</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h3>قائمة المستخدمين</h3>
<table class="table table-bordered mt-3">
<thead>
<tr>
<th>Username</th>
<th>Email</th>
<th>Role</th>
</tr>
</thead>
<tbody>
{% for user in users %}
<tr>
<td>{{ user.username }}</td>
<td>{{ user.email }}</td>
<td>
{% for g in user.groups.all %}
{{ g.name }}
{% empty %}
No Role
{% endfor %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</body>
</html>
✅ النتيجة النهائية
✔ لوحة تحكم مستقلة
✔ إدارة مستخدمين بدون Django Admin
✔ حماية كاملة بالصلاحيات
✔ واجهة احترافية بـ Bootstrap
🧪 تمرين الدرس الخامس
حاول تنفيذ التالي:
1. أضف زر "حذف مستخدم" (لـ Admin فقط)2. أضف عدّاد:
- عدد المستخدمين
- عدد Admin
- عدد Editor
✅ حل تمرين الدرس الخامس (Dashboard متكامل)
✔ المطلوب في التمرين:
1. زر حذف مستخدم (لـ Admin فقط)2. عدّادات:
- عدد المستخدمين
- عدد Admin
- عدد Editor
🧱 1️⃣ تحديث Views (المنطق الخلفي)
dashboard/views.py
from django.shortcuts import render, redirect, get_object_or_404
from django.contrib.auth.decorators import login_required
from django.contrib.auth.models import User, Group
from django.contrib import messages
from .decorators import admin_required
@login_required
def dashboard_home(request):
total_users = User.objects.count()
admin_count = User.objects.filter(groups__name="Admin").count()
editor_count = User.objects.filter(groups__name="Editor").count()
context = {
"total_users": total_users,
"admin_count": admin_count,
"editor_count": editor_count,
}
return render(request, "dashboard/dashboard.html", context)
@login_required
@admin_required
def users_list(request):
users = User.objects.all()
return render(request, "dashboard/users.html", {"users": users})
@login_required
@admin_required
def delete_user(request, user_id):
user = get_object_or_404(User, id=user_id)
if user == request.user:
messages.error(request, "لا يمكنك حذف نفسك")
return redirect("users")
user.delete()
messages.success(request, "تم حذف المستخدم بنجاح")
return redirect("users")
🌐 2️⃣ تحديث URLs
dashboard/urls.py
from django.urls import path
from .views import dashboard_home, users_list, delete_user
urlpatterns = [
path("", dashboard_home, name="dashboard"),
path("users/", users_list, name="users"),
path("delete-user/<int:user_id>/", delete_user, name="delete_user"),
]
🎨 3️⃣ تصميم Sidebar احترافي (Bootstrap)
dashboard/templates/dashboard/base.html
<!DOCTYPE html>
<html>
<head>
<title>Dashboard</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body { min-height: 100vh; }
.sidebar {
width: 240px;
background: #212529;
color: #fff;
position: fixed;
height: 100%;
}
.sidebar a {
color: #adb5bd;
display: block;
padding: 12px 20px;
text-decoration: none;
}
.sidebar a:hover {
background: #343a40;
color: #fff;
}
.content {
margin-left: 240px;
padding: 30px;
}
</style>
</head>
<body>
<div class="sidebar">
<h4 class="text-center py-3">Dashboard</h4>
<a href="{% url 'dashboard' %}">🏠 الرئيسية</a>
{% if request.user.groups.first.name == "Admin" %}
<a href="{% url 'users' %}">👥 إدارة المستخدمين</a>
{% endif %}
<a href="{% url 'logout' %}">🚪 تسجيل الخروج</a>
</div>
<div class="content">
{% block content %}{% endblock %}
</div>
</body>
</html>
📊 4️⃣ صفحة Dashboard مع العدّادات
dashboard/dashboard.html
{% extends "dashboard/base.html" %}
{% block content %}
<h2>مرحبًا {{ request.user.username }}</h2>
<div class="row mt-4">
<div class="col-md-4">
<div class="card text-center">
<div class="card-body">
<h5>إجمالي المستخدمين</h5>
<h2>{{ total_users }}</h2>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-center">
<div class="card-body">
<h5>Admins</h5>
<h2>{{ admin_count }}</h2>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-center">
<div class="card-body">
<h5>Editors</h5>
<h2>{{ editor_count }}</h2>
</div>
</div>
</div>
</div>
{% endblock %}
👥 5️⃣ صفحة إدارة المستخدمين مع زر الحذف
dashboard/users.html
{% extends "dashboard/base.html" %}
{% block content %}
<h3>إدارة المستخدمين</h3>
<table class="table table-bordered mt-4">
<thead class="table-dark">
<tr>
<th>Username</th>
<th>Email</th>
<th>Role</th>
<th>إجراء</th>
</tr>
</thead>
<tbody>
{% for user in users %}
<tr>
<td>{{ user.username }}</td>
<td>{{ user.email }}</td>
<td>
{% for g in user.groups.all %}
{{ g.name }}
{% empty %}
No Role
{% endfor %}
</td>
<td>
{% if user != request.user %}
<a href="{% url 'delete_user' user.id %}"
class="btn btn-danger btn-sm"
onclick="return confirm('هل أنت متأكد من الحذف؟');">
حذف
</a>
{% else %}
---
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}
🏁 النتيجة النهائية
✔ Dashboard احترافي
✔ Sidebar ثابت
✔ عدّادات حقيقية
✔ إدارة مستخدمين كاملة
✔ حماية بالأدوار
✔ بدون Django Admin
