برنامه‌نویسی

آموزش CRUD در فریم‌ورک Django

آموزش crud در فریم‌ورک django

ما در این مقاله تصمیم گرفته‌ایم تا عملیات‌ Create، Read، Update و Delete که به CRUD معروف هستند را در فریم‌ورک Django پیاده‌سازی کنیم. این عملیات به دیتابیس برنامه مربوط می‌شود و احتمالا متوجه شده‌اید که عملکرد هرکدام از آن‌ها به چه شکل است.

  • Create: داده‌های جدیدی را به دیتابیس اضافه می‌کنیم.
  • Read: داده‌های دیتابیس را می‌خوانیم و از آن داده‌ها در خروجی برنامه‌ی خود استفاده می‌کنیم.
  • Update: داده‌های دیتابیس را ویرایش و به‌روزرسانی می‌کنیم.
  • Delete: داده‌های موجود در دیتابیس را حذف می‌کنیم.

با دنبال کردن مراحل زیر می‌توانید در ساخت برنامه‌ با ما همراه باشید و توجه داشته باشید که ساختار نهایی برنامه‌ی به شکل زیر است:

├── crudproj
│   ├── __init__.py
│   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── employee
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── forms.py
│   ├── migrations
│   │   ├── 0001_initial.py
│   │   └── __init__.py
│   ├── models.py
│   ├── static
│   │   └── css
│   │       └── style.css
│   ├── templates
│   │   ├── edit.html
│   │   ├── index.html
│   │   └── show.html
│   ├── tests.py
│   └── views.py
└── manage.py
  1. برای شروع آموزش به یک پروژه‌ و برنامه‌ی Django نیاز داریم بنابراین برای ساخت پروژه از دستور زیر استفاده می‌کنیم (توجه داشته باشید که با دستور pip install django، این فریم‌ورک را از قبل بر روی سیستم یا محیط مجازی خود نصب کرده باشید):
django-admin startproject crudproj

سپس با اجرای دستور زیر در مسیر پروژه:

python manage.py startapp employee

برنامه‌ای با نام employee می‌سازیم زیرا هدف این آموزش ساخت یک برنامه‌ی ساده برای نگهداری و مدیریت اطلاعات کارمندان است.

  1. برای استفاده از دیتابیس MySQL در فریم‌ورک Django بایستی در وهله اول mysqlclient را با اجرای دستور زیر نصب کنید:
pip install mysqlclient

و بعد از نصب این پکیج، اطلاعات دیتابیس خود را به‌صورت زیر در فایل settings.py وارد کنید. همچنین توجه داشته باشید که می‌بایستی ENGINE پیش‌فرض را از django.db.backends.sqlite3 به django.db.backends.mysql تغییر دهید.

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'djangodb',
        'USER':'root',
        'PASSWORD':'secret',
        'HOST':'localhost',
        'PORT':'3306'
    }
}
  1. پس از پیکربندی دیتابیس، Model برنامه‌ی خود را ایجاد می‌کنیم و برای این کار کدهای زیر را در فایل models.py برنامه قرار می‌دهیم:
from django.db import models

class Employee(models.Model):
    eid = models.CharField(max_length=20)
    ename = models.CharField(max_length=100)
    eemail = models.EmailField()
    econtact = models.CharField(max_length=15)

    class Meta:
        db_table = "employee"
  1. حال برای ایجاد ModelForm، یک فایل با نام forms.py ایجاد می‌کنیم و کدهای زیر را در آن فایل قرار می‌دهیم:
from django import forms
from employee.models import Employee


class EmployeeForm(forms.ModelForm):
    class Meta:
        model = Employee
        fields = "__all__"

    def __init__(self, *args, **kwargs):
        super(EmployeeForm, self).__init__(*args, **kwargs)
        self.fields['eid'].widget.attrs.update({'class': 'form-control'})
        self.fields['ename'].widget.attrs.update({'class': 'form-control'})
        self.fields['eemail'].widget.attrs.update({'class': 'form-control'})
        self.fields['econtact'].widget.attrs.update({'class': 'form-control'})
  1. در این مرحله برای ایجاد View، کدهای زیر را در فایل views.py وارد می‌کنیم:
from django.shortcuts import render, redirect
from employee.forms import EmployeeForm
from employee.models import Employee
# Create your views here.


def emp(request):
    if request.method == "POST":
        form = EmployeeForm(request.POST)
        if form.is_valid():
            try:
                form.save()
                return redirect('/show')
            except:
                pass
    else:
        form = EmployeeForm()
    return render(request, 'index.html', {'form': form})


def show(request):
    employees = Employee.objects.all()
    return render(request, "show.html", {'employees': employees})


def edit(request, id):
    employee = Employee.objects.get(id=id)
    return render(request, 'edit.html', {'employee': employee})


def update(request, id):
    employee = Employee.objects.get(id=id)
    form = EmployeeForm(request.POST, instance=employee)
    if form.is_valid():
        form.save()
        return redirect("/show")
    return render(request, 'edit.html', {'employee': employee})


def destroy(request, id):
    employee = Employee.objects.get(id=id)
    employee.delete()
    return redirect("/show")
  1. در نهایت برای اضافه کردن View برنامه به patternهای URL، کدهای موجود در فایل urls.py را به‌صورت زیر تغییر می‌دهیم و Viewهای جدید خود را به آن‌ها اضافه می‌کنیم:
from django.contrib import admin
from django.urls import path
from employee import views
urlpatterns = [
    path('admin/', admin.site.urls),
    path('emp/', views.emp),
    path('show/',views.show),
    path('edit/<int:id>', views.edit),
    path('update/<int:id>', views.update),
    path('delete/<int:id>', views.destroy),
]
  1. سپس یک پوشه با نام templates می‌سازیم و سه فایل با نام‌های index.html، edit.html و show.html در آن پوشه ایجاد می‌کنیم. فایل index.html :
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Index</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    {% load static %}
    <link rel="stylesheet" href="{% static 'css/style.css' %}" />

</head>

<body>
    <form method="POST" class="post-form" action="/emp/">
        {% csrf_token %}
        <div class="container">
            <br>
            <div class="form-group row">
                <label class="col-sm-1 col-form-label"></label>
                <div class="col-sm-4">
                    <h3>Enter Details</h3>
                </div>
            </div>
            <div class="form-group row">
                <label for="id_eid" class="col-sm-2 col-form-label">Employee Id:</label>
                <div class="col-sm-4">
                    {{ form.eid }}
                </div>
            </div>
            <div class="form-group row">
                <label for="id_ename" class="col-sm-2 col-form-label">Employee Name:</label>
                <div class="col-sm-4">
                    {{ form.ename }}
                </div>
            </div>
            <div class="form-group row">
                <label for="id_eemail" class="col-sm-2 col-form-label">Employee Email:</label>
                <div class="col-sm-4">
                    {{ form.eemail }}
                </div>
            </div>
            <div class="form-group row">
                <label for="id_econtact" class="col-sm-2 col-form-label">Employee Contact:</label>
                <div class="col-sm-4">
                    {{ form.econtact }}
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-1 col-form-label"></label>
                <div class="col-sm-4">
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </div>
        </div>
    </form>
</body>

</html>

فایل show.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Employee Records</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    {% load static %}
    <link rel="stylesheet" href="{% static 'css/style.css' %}" />
</head>

<body>
    <table class="table table-striped table-bordered table-sm">
        <thead class="thead-dark">
            <tr>
                <th>Employee ID</th>
                <th>Employee Name</th>
                <th>Employee Email</th>
                <th>Employee Contact</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for employee in employees %}
            <tr>
                <td>{{ employee.eid }}</td>
                <td>{{ employee.ename }}</td>
                <td>{{ employee.eemail }}</td>
                <td>{{ employee.econtact }}</td>
                <td>
                    <a href="/edit/{{ employee.id }}"><span class="glyphicon glyphicon-pencil">Edit</span></a>
                    <a href="/delete/{{ employee.id }}">Delete</a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    <br>
    <br>
    <center><a href="/emp" class="btn btn-primary">Add New Record</a></center>
</body>

</html>

فایل edit.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Index</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    {% load static %}
    <link rel="stylesheet" href="{% static 'css/style.css' %}" />
</head>

<body>
    <form method="POST" class="post-form" action="/update/{{employee.id}}">
        {% csrf_token %}
        <div class="container">
            <br>
            <div class="form-group row">
                <label class="col-sm-1 col-form-label"></label>
                <div class="col-sm-4">
                    <h3>Update Details</h3>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-2 col-form-label">Employee Id:</label>
                <div class="col-sm-4">
                    <input type="text" name="eid" id="id_eid" required maxlength="20" value="{{ employee.eid }}" />
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-2 col-form-label">Employee Name:</label>
                <div class="col-sm-4">
                    <input type="text" name="ename" id="id_ename" required maxlength="100"
                        value="{{ employee.ename }}" />
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-2 col-form-label">Employee Email:</label>
                <div class="col-sm-4">
                    <input type="email" name="eemail" id="id_eemail" required maxlength="254"
                        value="{{ employee.eemail }}" />
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-2 col-form-label">Employee Contact:</label>
                <div class="col-sm-4">
                    <input type="text" name="econtact" id="id_econtact" required maxlength="15"
                        value="{{ employee.econtact }}" />
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-1 col-form-label"></label>
                <div class="col-sm-4">
                    <button type="submit" class="btn btn-success">Update</button>
                </div>
            </div>
        </div>
    </form>
</body>

</html>
  1. برای اضافه کردن برخی کدهای CSS، یک پوشه با نام static می‌سازیم و پوشه‌ی دیگری با نام css در آن ایجاد می‌کنیم. درنهایت کدهای زیر را در یک فایل با نام style.css قرار می‌دهیم:
body {
    font: 12px/1.4 Verdana, Arial;
    background: #eee;
    height: 100%;
    margin: 25px 0;
    padding: 0
}

h1 {
    font: 24px Georgia, Verdana;
    margin: 0
}

h2 {
    font-size: 12px;
    font-weight: normal;
    font-style: italic;
    margin: 0 0 20px
}

p {
    margin-top: 0
}

ul {
    margin: 0;
    padding-left: 20px
}

#testdiv {
    width: 600px;
    margin: 0 auto;
    border: 1px solid #ccc;
    padding: 20px 25px;
    background: #fff
}

#tinybox {
    position: absolute;
    display: none;
    padding: 10px;
    background: #fff url(images/preload.gif) no-repeat 50% 50%;
    border: 10px solid #e3e3e3;
    z-index: 2000
}

#tinymask {
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #000;
    z-index: 1500
}

#tinycontent {
    background: #fff
}

.button {
    font: 14px Georgia, Verdana;
    margin-bottom: 10px;
    padding: 8px 10px 9px;
    border: 1px solid #ccc;
    background: #eee;
    cursor: pointer
}

.button:hover {
    border: 1px solid #bbb;
    background: #e3e3e3
}
  1. می‌توان گفت که برنامه تکمیل شده است و زمان آن رسیده که نام برنامه‌ی خود را به تنظیمات پروژه یعنی فایل settings.py اضافه ‌کنیم:
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'employee'
]
  1. پس از اضافه کردن نام برنامه به تنظیمات پروژه، دستور زیر را اجرا می‌کنیم تا migration مورد نظرمان initiate شود:
python manage.py makemigrations
  1. و با اجرای دستور زیر، جداول مورد نیاز ما در دیتابیس اضافه می‌شوند و برنامه‌ی ما با موفقیت به دیتابیس متصل می‌شود:
python manage.py migrate
  1. می‌توان گفت که برنامه آماده اجرا است و با دستور زیر می‌توانید خروجی برنامه را در آدرس localhost:8000/show مشاهده کنید:
python manage.py runserver

همچنین اگر در اجرای پروژه با مشکلی روبرو شدید، می‌توانید پروژه نهایی را مستقیما از GitLab دریافت کرده و کدهایتان را بررسی کنید.

منبع: https://www.javatpoint.com/django-crud-application