خواندن ۱۳ دقیقه·۳ سال پیش

Django CRUD (Create Read Update Delete) Example

ه نام آن که جان را فکرت آموخت / چراغ دل به نور جان برافروخت

با عرض سلام و وقت بخیر خدمت کاربران محترم سایت ویرگول، در این مقاله آموزشی که چکیده آموزش جنگو ORM از سایت Django documentation بهمراه مطالب تکمیلی تر , سعی شده یک آموزش کاربردی و پروژه محور از جنگو ORM ارایه گردد.ایده این سری مقاله های آموزشی از این موضوع سرچشمه می گیرد که بخشی از خوانندگان وجود دارد که به محتوای نوشتاری آنلاین بهتر پاسخ می دهند و ترجیج می دهند مهارت های جدید را به سرعت از طریق خواندن افزایش دهند.این سری آموزش ها با ارایه اولین پکیج آموزشی در خصوص جنگو آغاز می شود که انتظار می رود با واکنش مثبت کاربران همراه شود.

توجه: این مقاله به مرور زمان، ویرایش و یا تکمیل می‌شود!
تقاضا: در صورتی که با مشکل تایپی، دستوری و یا مفهومی در این مقاله برخورد کردید، از شما دوست عزیز و گرامی، صمیمانه تقاضا می‌کنم که اینجانب را مطلع کرده، تا نسبت به تصحیح و یا تکمیل آن، در اسرع وقت، اقدام نمایم. با کمال تشکر جواد جهانگیری
شماره تلفن همراه: 09149431772
نشانی پست الکترونیکی: javad.jahangiri.niopdc@gmail.com
فیلم‌های آموزشی در آپارات:جواد جهانگیری (CTO) - آپارات
فیلم آموزشی در یوتویب: javad jahangiri - YouTube

نسخه مقاله: ۱.۱ - تاریخ بروزرسانی: 1401/02/01

برای دیدن فیلم اموزشی مربوطه به کانال آپاراتی بنده به ادرس جواد جهانگیری (CTO) - آپارات مراجعه نمایید

سورس این پروژه در گیت هاب بنده به ادرس زیر موجود می باشد

https://github.com/javadjahangiriniopdc/DjangoCrudExample

یک پروژه Django ایجاد می کنیم

یک app جدید بنام employee ایجاد می کنیم

در فایل settingنسبت به اضافه کردن app جدید اقدام می کنیم

با عنایت به اینکه می خواهیم در این پروژه از دیتابیس MySQL استفاده کنیم ابتدا نسبت به نصب VisualCppRedist_AIO_x86_x64 از سایت soft98 اقدام می کنیم

Microsoft Visual C++ Runtime

برخی نرم افزارها که با استفاده از کتابخانه ها و Component های زبان ++Visual C نوشته شده اند، به طور عادی بر روی سیستم اجرا نمیشوند و با ارورهایی مانند MSVCP120.dll و MSVCP140.dll و VCRUNTIME و... مواجه میشوید و برای اجرا نیازمند تعدادی فایل هستند که باید بر روی سیستم موجود باشد. Microsoft Visual C++ Runtime در حقیقت تعدادی فایل مورد نیاز سیستم عامل است تا بتواند برنامه های نوشته شده تحت این زبان ها را اجرا کند

سپس نسبت به نسب WampServer بر روی ویندوز از سایت soft98 اقدام می کنیم نصب ان ساده بود فقط دقت شود که با عنایت به اینکه برای کار نیاز به Microsoft Visual C++ Runtime دارد حتما قبل از نصب مطابق اموزش اقدام شود.

WampServer

یکی از بهترین و قدیمی ترین نرم افزارهای لوکال ساز محسوب میشود این نرم افزار یک نرم افزار برای راه اندازی IIS‌ لینوکس هست که شما بوسیله آن میتوانید فایل های پی اچ پی را اجرا و نتیجه آن را ببینید . شما میتوانید توسط این نرم افزار همه اسکریپت های PHP را بر روی لوکال تست نمایید.
برخی ویژگی های WampServer
قابلیت سوئیچ بین تمامی نسخه های Php MySQL Apache
امکان مدیریت تمام سرویس های نصب شده
امکان دسترسی به تمام ماژول های php و قابلیت فعال یا غیر فعال سازی هر یک از آنها تنها با یک کلیک
امکان دسترسی به تنظیمات هر کدام از سرویس ها
قابلیت اسفاده از بانک اطلاعاتی sqlitemanager
قابلیت استفاده از phpmyadmin برای مدیریت بانک های اطلاعاتی
و ....

نصب WampServer ساده بود و به گزینه پیش فرض پسند کرده و نصب را تا اخرین مرحله ادامه دهید درصورتی که عملیات صحیح باشد بعد از اجرای WampServer می بایستی ایکون ان در کنار ساعت ویندوز به رنگ سبز باشد اگر به رنگ نارنجی باشد به این معنی هست که یکی از سرویس ها بدرستی اجرا نشده است با عنایت به اینکه اکثر دانت کور کار ها معمولا بر روی سیستم خود IIS را فعال می کند پورت 80 برای این سرور تخصیص داده می شود و هنگام که سرویس Appache می خواهد راه اندازی شود این پورت use است لذا بر روی ایکون WampServer مطابق شکل راست کلیک کرده و نسبت به تغییر پورت اقدام می کنیم

معمولا پورت را به 8080 تغییر می دهیم

درنهایت اگر عملیات به درستی انجام شود ایکون WampServer به شکل سبز خواهد بود

با عنایت به اینکه در این اموزش هدف اموزش MySQL نیست و در صورت نیاز به اموزش MySQL از اپارات بنده از دوره اموش کاردی و پروژه محور MySQL استفاده نمایید

لیست پخش اموزش کاربردی MySQL

یک دیتابیس جدید بنام djangodb با Collation از نوع utf8_general_ci اقدام می کنیم :

سپس مجدد به پروژه Django خود برگشته و فایل تنظیمات دیتابیس پیش فرض را به شکل زیر تغییر می دهیم

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'djangodb',
        'USER': 'root',
        'PASSWORD': 'mysql',
        'HOST': 'localhost',
        'PORT': '3306'
    }
}

پیشنهاد می شود برای درک بهتر این اموزش ابتدا از دوره های رایگان بنده در اپارت به شرح زیر استفاده شود

https://www.aparat.com/playlist/802207

دوره MySQL در پایتون

دوره آموزش جنگو

مطابق اموزش های ارایه شده می بایستی در این مرحله نسبت به نسبت mysqlclient اقدام شود

ایجاد مدل Employee

وارد فایل models.py در APP جدید ایجاد شده می شود و یک مدل بنام Employee را ایجاد می کنیم:

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 = &quotemployee&quot

نسبت به makemigration و در ادامه migrate پروژه اقدام می کنیم

یک کاربر superuser نیز برای ورود به پنل ادمین ایجاد می کنیم

در ادامه نسبت به رجیستر کردن مدل کارمند در admin Panel جنگو به شکل زیر اقدام می کنیم

from django.contrib import admin

# Register your models here.
from employee.models import Employee

admin.site.register(Employee)

وارد پنل admin شده و چندین رکورد برای مدل Employee اقدام می کنیم

یک فایل یک فرم بنام forms.py به پروژه اضافه می کنیم

froms.py

from django import forms
from employee.models import Employee


class EmployeeForm(forms.ModelForm):
    class Meta:
        model = Employee
        fields = &quot__all__&quot

در داخل پوشه employee یک فایل بنام employee/urls.py ایجاد می کنیم و سپس به شرح ذیل ان را در داخل urls.py ایجاد می کنیم:

urls.py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('employee.urls'))
]

در داخل app کارمند ایجاد شده پوشه های templates و static را به شرح ذیل ایجاد می کنیم:

یک فایل index.html در مسیر employee/templates/employee/index.html ایجاد می کنیم

##employee/templates/employee/index.html

<!DOCTYPE html>
{% load static %}
<html lang=&quoten&quot>
<head>
    <meta charset=&quotUTF-8&quot>
    <title>Index</title>
    <link rel=&quotstylesheet&quot href=&quothttps://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css&quot
          integrity=&quotsha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn&quot crossorigin=&quotanonymous&quot>
    <script src=&quothttps://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js&quot
            integrity=&quotsha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj&quot
            crossorigin=&quotanonymous&quot>
    <script src=&quothttps://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js&quot
            integrity=&quotsha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF&quot
            crossorigin=&quotanonymous&quot>
    <link rel=&quotstylesheet&quot href=&quot{% static 'employee/css/style.css' %}&quot/>
</head>
<body>
<form method=&quotPOST&quot class=&quotpost-form&quot action=&quot/emp&quot>
        {% csrf_token %}
    <div class=&quotcontainer&quot>
<br>
    <div class=&quotform-group row&quot>
    <label class=&quotcol-sm-1 col-form-label&quot></label>
    <div class=&quotcol-sm-4&quot>
    <h3>Enter Details</h3>
    </div>
  </div>
    <div class=&quotform-group row&quot>
    <label class=&quotcol-sm-2 col-form-label&quot>Employee Id:</label>
    <div class=&quotcol-sm-4&quot>
      {{ form.eid }}
    </div>
  </div>
  <div class=&quotform-group row&quot>
    <label class=&quotcol-sm-2 col-form-label&quot>Employee Name:</label>
    <div class=&quotcol-sm-4&quot>
      {{ form.ename }}
    </div>
  </div>
    <div class=&quotform-group row&quot>
    <label class=&quotcol-sm-2 col-form-label&quot>Employee Email:</label>
    <div class=&quotcol-sm-4&quot>
      {{ form.eemail }}
    </div>
  </div>
    <div class=&quotform-group row&quot>
    <label class=&quotcol-sm-2 col-form-label&quot>Employee Contact:</label>
    <div class=&quotcol-sm-4&quot>
      {{ form.econtact }}
    </div>
  </div>
    <div class=&quotform-group row&quot>
    <label class=&quotcol-sm-1 col-form-label&quot></label>
    <div class=&quotcol-sm-4&quot>
    <button type=&quotsubmit&quot class=&quotbtn btn-primary&quot>Submit</button>
    </div>
  </div>
    </div>
</form>
</body>
</html>

یک فایل show.html نیز در مسیر employee/templates/employee/show.html ایجاد می کنیم

##employee/templates/employee/show.html

<!DOCTYPE html>
{% load static %}
<html lang=&quoten&quot>
<head>
    <meta charset=&quotUTF-8&quot>
    <title>Employee Records</title>
    <link rel=&quotstylesheet&quot href=&quothttps://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css&quot
          integrity=&quotsha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn&quot crossorigin=&quotanonymous&quot>
    <script src=&quothttps://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js&quot
            integrity=&quotsha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj&quot
            crossorigin=&quotanonymous&quot>
    <script src=&quothttps://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js&quot
            integrity=&quotsha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF&quot
            crossorigin=&quotanonymous&quot>
    <link rel=&quotstylesheet&quot href=&quot{% static 'employee/css/style.css' %}&quot/>
</head>
<body>
<table class=&quottable table-striped table-bordered table-sm&quot>
    <thead class=&quotthead-dark&quot>
    <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=&quot/edit/{{ employee.id }}&quot><span class=&quotglyphicon glyphicon-pencil&quot>Edit</span></a>
                <a href=&quot/delete/{{ employee.id }}&quot>Delete</a>
            </td>
        </tr>
    {% endfor %}
    </tbody>
</table>
<br>
<br>
<center><a href=&quot/emp&quot class=&quotbtn btn-primary&quot>Add New Record</a></center>
</body>
</html>

یک فایل show.html نیز در مسیر employee/templates/employee/edit.html ایجاد می کنیم

##employee/templates/employee/edit.html

{% load static %}
<!DOCTYPE html>
<html lang=&quoten&quot>
<head>
    <meta charset=&quotUTF-8&quot>
    <title>Index</title>
       <link rel=&quotstylesheet&quot href=&quothttps://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css&quot
          integrity=&quotsha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn&quot crossorigin=&quotanonymous&quot>
    <script src=&quothttps://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js&quot
            integrity=&quotsha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj&quot
            crossorigin=&quotanonymous&quot>
    <script src=&quothttps://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js&quot
            integrity=&quotsha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF&quot
            crossorigin=&quotanonymous&quot>
    <link rel=&quotstylesheet&quot href=&quot{% static 'employee/css/style.css' %}&quot/>
</head>
<body>
<form method=&quotPOST&quot class=&quotpost-form&quot action=&quot/update/{{ employee.id }}&quot>
    {% csrf_token %}
    <div class=&quotcontainer&quot>
        <br>
        <div class=&quotform-group row&quot>
            <label class=&quotcol-sm-1 col-form-label&quot></label>
            <div class=&quotcol-sm-4&quot>
                <h3>Update Details</h3>
            </div>
        </div>
        <div class=&quotform-group row&quot>
            <label class=&quotcol-sm-2 col-form-label&quot>Employee Id:</label>
            <div class=&quotcol-sm-4&quot>
                <input type=&quottext&quot name=&quoteid&quot id=&quotid_eid&quot required maxlength=&quot20&quot value=&quot{{ employee.eid }}&quot/>
            </div>
        </div>
        <div class=&quotform-group row&quot>
            <label class=&quotcol-sm-2 col-form-label&quot>Employee Name:</label>
            <div class=&quotcol-sm-4&quot>
                <input type=&quottext&quot name=&quotename&quot id=&quotid_ename&quot required maxlength=&quot100&quot value=&quot{{ employee.ename }}&quot/>
            </div>
        </div>
        <div class=&quotform-group row&quot>
            <label class=&quotcol-sm-2 col-form-label&quot>Employee Email:</label>
            <div class=&quotcol-sm-4&quot>
                <input type=&quotemail&quot name=&quoteemail&quot id=&quotid_eemail&quot required maxlength=&quot254&quot
                       value=&quot{{ employee.eemail }}&quot/>
            </div>
        </div>
        <div class=&quotform-group row&quot>
            <label class=&quotcol-sm-2 col-form-label&quot>Employee Contact:</label>
            <div class=&quotcol-sm-4&quot>
                <input type=&quottext&quot name=&quotecontact&quot id=&quotid_econtact&quot required maxlength=&quot15&quot
                       value=&quot{{ employee.econtact }}&quot/>
            </div>
        </div>
        <div class=&quotform-group row&quot>
            <label class=&quotcol-sm-1 col-form-label&quot></label>
            <div class=&quotcol-sm-4&quot>
                <button type=&quotsubmit&quot class=&quotbtn btn-success&quot>Update</button>
            </div>
        </div>
    </div>
</form>
</body>
</html>

در داخل پوشه employee/static/employee یک پوشه بنام css ایجاد کرده و یک فایل style.css در این پوشه ایجاد می کنیم

##employee/static/employee/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: 400;
    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
}

دقت شود بوت استرپ در فایل index.html به شکل زیر در بالا بارگذاری شده است

در فایل employee/urls.py نسبت به تعریف روتینگ به شرح ذیل اقدام می کنیم

##employee/urls.py

from django.contrib import admin
from django.urls import path, include

from employee import views

urlpatterns = [
    path('', views.show),
    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),
]

سپس فایل employee/views.py به شرح ذیل تعریف می کنیم

##employee/views.py

from django.shortcuts import render

# Create your views here.
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 == &quotPOST&quot:
        form = EmployeeForm(request.POST)
        if form.is_valid():
            try:
                form.save()
                return redirect('/show')
            except:
                pass
    else:
        form = EmployeeForm()
    return render(request, 'employee/index.html', {'form': form})


def show(request):
    employees = Employee.objects.all()
    return render(request, &quotemployee/show.html&quot, {'employees': employees})


def edit(request, id):
    employee = Employee.objects.get(id=id)
    return render(request, 'employee/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(&quot/show&quot)
    return render(request, 'employee/edit.html', {'employee': employee})


def destroy(request, id):
    employee = Employee.objects.get(id=id)
    employee.delete()
    return redirect(&quot/show&quot)

نمونه از صفحه نمایش اطلاعات

نمونه از صفحه درج اطلاعات

نمونه از صفحه ویرایش اطلاعات

حذف اطلاعات

باتشکر از مطالعه مقاله ,مثل همیشه کنجکاو باشید !!!

در دوره های آموزش تضمینی مجتمع فنی ارومیه که به صورت خصوصی و عمومی در دو شیوه حضوری و آنلاین برگزار می شود سرفصل های بسیار متنوع و کاربردی را بصورت پروژه محور آموزش داده می شود تا شخص کارآموز بتواند بلافاصله پس از اتمام این دوره در کمترین زمان ممکن وارد بازار کار شود.

آموزش تخصص ماست با ما حرفه ای شوید

جهت مشاوره با شماره 09149431772 در ارتباط باشید ...

اموزش جنگو در ارومیه اموزش برنامه نویسی در ارومیه مجتمع فنی ارومیه جواد جهانگیری div class

جواد جهانگیری

بنده دارای مدارک بین المللی شبکه ,برنامه نویسی, سرورهای ویندوزی و لینوکس هستم بیش از ده سال سابقه تدریس در زمینه های یاد شده را دارم. آموزش تخصص ماست با ما حرفه ای شوید 09149431772 مجتمع فنی ارومیه

شاید از این پست‌ها خوشتان بیاید