🎯 الدرس الثالث: إنشاء نظام إدارة مستخدمين (User Management CRUD) داخل لوحة التحكم

User Management CRUD

في هذا الدرس سنقوم ببناء نظام حقيقي لإدارة المستخدمين داخل الـ Dashboard، يشمل:

✔ إضافة مستخدم جديد
✔ عرض جميع المستخدمين
✔ تعديل بيانات مستخدم
✔ حذف مستخدم
✔ ربطه بقواعد بيانات Django
✔ تخصيص تصميم بسيط Bootstrap

هذا أحد أهم الدروس في بناء لوحة تحكم احترافية.

---

🔥 الخطوة 1: إنشاء موديل المستخدم (User Model)

سنستخدم مستخدم Django الافتراضي لأنه مكتمل وجاهز ولا حاجة لإعادة اختراعه.

ولكن لإنشاء CRUD يجب ربطه بنموذج فورم خاص.

---

📌 الخطوة 2: إنشاء User Form

في تطبيق main، أنشئ ملفًا جديدًا:

main/forms.py

ضع فيه:

from django import forms
from django.contrib.auth.models import User

class UserForm(forms.ModelForm):
    password = forms.CharField(widget=forms.PasswordInput(), required=False)

    class Meta:
        model = User
        fields = ["username", "email", "password", "is_staff", "is_active"]

---

🔥 الخطوة 3: إنشاء الصفحات

1️⃣ صفحة عرض المستخدمين users_list.html

أنشئ:

templates/users_list.html

وأضف:

{% extends "base.html" %}
{% block content %}

<h2 class="mb-4">إدارة المستخدمين</h2>

<a href="{% url 'add_user' %}" class="btn btn-primary mb-3">➕ إضافة مستخدم جديد</a>

<table class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>اسم المستخدم</th>
            <th>البريد الإلكتروني</th>
            <th>الصلاحيات</th>
            <th>الحالة</th>
            <th>إجراءات</th>
        </tr>
    </thead>
    <tbody>
        {% for user in users %}
        <tr>
            <td>{{ user.username }}</td>
            <td>{{ user.email }}</td>
            <td>{% if user.is_staff %} مدير {% else %} مستخدم {% endif %}</td>
            <td>{% if user.is_active %} نشط {% else %} معطل {% endif %}</td>
            <td>
                <a href="{% url 'edit_user' user.id %}" class="btn btn-warning btn-sm">تعديل</a>
                <a href="{% url 'delete_user' user.id %}" class="btn btn-danger btn-sm">حذف</a>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>

{% endblock %}

---

2️⃣ صفحة إضافة/تعديل مستخدم user_form.html

templates/user_form.html

{% extends "base.html" %}
{% block content %}

<h2 class="mb-4">{{ title }}</h2>

<form method="POST">
    {% csrf_token %}
    {{ form.as_p }}

    <button type="submit" class="btn btn-success">حفظ</button>
    <a href="{% url 'users' %}" class="btn btn-secondary">إلغاء</a>
</form>

{% endblock %}

---

🔥 الخطوة 4: كتابة الـ Views

افتح:

main/views.py

وأضف:

from django.shortcuts import render, redirect, get_object_or_404
from django.contrib.auth.models import User
from .forms import UserForm

def users_list(request):
    users = User.objects.all()
    return render(request, "users_list.html", {"users": users})

def add_user(request):
    form = UserForm()
    if request.method == "POST":
        form = UserForm(request.POST)
        if form.is_valid():
            user = form.save(commit=False)
            if form.cleaned_data["password"]:
                user.set_password(form.cleaned_data["password"])
            user.save()
            return redirect("users")
    return render(request, "user_form.html", {"form": form, "title": "إضافة مستخدم جديد"})

def edit_user(request, user_id):
    user = get_object_or_404(User, id=user_id)
    form = UserForm(instance=user)
    if request.method == "POST":
        form = UserForm(request.POST, instance=user)
        if form.is_valid():
            user = form.save(commit=False)
            if form.cleaned_data["password"]:
                user.set_password(form.cleaned_data["password"])
            user.save()
            return redirect("users")
    return render(request, "user_form.html", {"form": form, "title": "تعديل المستخدم"})

def delete_user(request, user_id):
    user = get_object_or_404(User, id=user_id)
    user.delete()
    return redirect("users")

---

🔥 الخطوة 5: تحديث روابط URLs

افتح:

main/urls.py

وأضف:

from .views import users_list, add_user, edit_user, delete_user

urlpatterns += [
    path("users/", users_list, name="users"),
    path("users/add/", add_user, name="add_user"),
    path("users/edit/<int:user_id>/", edit_user, name="edit_user"),
    path("users/delete/<int:user_id>/", delete_user, name="delete_user"),
]

---

🎉 الآن أصبحت لوحة التحكم تحتوي على إدارة مستخدمين كاملة

✔ عرض المستخدمين
✔ تعديل
✔ إضافة
✔ حذف
✔ التحكم بالصلاحيات والأنشطة
✔ واجهة Bootstrap مرتبة وجاهزة