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

آموزش عملیات CRUD در جنگو با Ajax

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

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

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

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

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

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

https://github.com/javadjahangiriniopdc/SimpleDjangoCrudAjax

Basic Configuration

در این آموزش قصد داریم از JQuery برای پیاده سازی درخواست های Ajax استفاده کنیم. JQuery ساده و آسان برای یادگیری است.

base.html

{% load static %}
<!doctype html>
<html>
  <head>
    <meta charset=&quotutf-8&quot>
    <title>{% block title %}Title{% endblock title %}</title>
    <link rel=&quotstylesheet&quot href=&quothttps://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css&quot integrity=&quotsha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u&quot crossorigin=&quotanonymous&quot>
    {% block stylesheet %}{% endblock stylesheet %}
  </head>
  <body>
    <main>
    {% block content %}
    {% endblock content %}
    </main>
    <script src=&quothttps://code.jquery.com/jquery-3.1.0.min.js&quot>
    <script >
    {% block javascript %}
    {% endblock javascript%}
  </body>
</html>

من همچنین از Bootstrap برای یک رابط کاربری زیبا استفاده می کنم. برای JQuery و Bootstrap، ما از CDN استفاده می کنیم.

Example – Django Ajax CRUD Operations

اکنون زمان آن است که با Ajax Calls همراه شوید.

Create and Read User Django Ajax

ما از هیچ forms.py استفاده نخواهیم کرد، ما فرم HTML را مستقیماً در قالب داریم. همانطور که در فایل crud.html ما مشاهده می کنید.

اگر می خواهید جنگو فرم شما را بسازد، می توانید از فرم های crispy forms استفاده کنید.

بیایید یک نمای برای رسیدگی به درخواست Ajax ایجاد کنیم.

# Views.py

from .models import CrudUser
from django.views.generic import View
from django.http import JsonResponse

class CreateCrudUser(View):
    def  get(self, request):
        name1 = request.GET.get('name', None)
        address1 = request.GET.get('address', None)
        age1 = request.GET.get('age', None)

        obj = CrudUser.objects.create(
            name = name1,
            address = address1,
            age = age1
        )

        user = {'id':obj.id,'name':obj.name,'address':obj.address,'age':obj.age}

        data = {
            'user': user
        }
        return JsonResponse(data)

توجه - ما قالب را رندر نمی کنیم، فقط JsonResponse را برمی گردانیم و همچنین از روش Ajax Get استفاده می کنیم.

ما داده‌های فرم را با استفاده از request.GET.get دریافت می‌کنیم (آدرس، هیچ)، آدرس ویژگی نام ورودی فرم است. سپس یک کاربر ایجاد می کنیم و کاربری را که ایجاد کرده ایم برای نمایش در صفحه وب برمی گردانیم.

# urls.py
from django.urls import path
from crud_ajax import views 

urlpatterns = [
    path('crud/',  views.CrudView.as_view(), name='crud_ajax'),
    path('ajax/crud/create/',  views.CreateCrudUser.as_view(), name='crud_ajax_create'),
]

Form in Crud.html for adding Users.

<form id=&quotaddUser&quot action=&quot&quot>
          <div class=&quotform-group&quot>
            <input class=&quotform-control&quot type=&quottext&quot name=&quotname&quot placeholder=&quotName&quot required>
          </div>
          <div class=&quotform-group&quot>
            <input class=&quotform-control&quot type=&quottext&quot name=&quotaddress&quot placeholder=&quotAddress&quot required>
          </div>
          <div class=&quotform-group&quot>
            <input class=&quotform-control&quot type=&quotnumber&quot name=&quotage&quot min=&quot10&quot max=&quot100&quot placeholder=&quotAge&quot required>
          </div>
          <button class=&quotbtn btn-primary form-control&quot type=&quotsubmit&quot>SUBMIT</button>
</form>

اکنون اجازه دهید دوباره درخواست javascript و jquery ajax را در Crud.html که در هنگام لیست کردن کاربران ایجاد کرده ایم اضافه کنیم.

Crud.html

...

{% block javascript %}

// Create Django Ajax Call
$(&quotform#addUser&quot).submit(function() {
    var nameInput = $('input[name=&quotname&quot]').val().trim();
    var addressInput = $('input[name=&quotaddress&quot]').val().trim();
    var ageInput = $('input[name=&quotage&quot]').val().trim();
    if (nameInput && addressInput && ageInput) {
        // Create Ajax Call
        $.ajax({
            url: '{% url &quotcrud_ajax_create&quot %}',
            data: {
                'name': nameInput,
                'address': addressInput,
                'age': ageInput
            },
            dataType: 'json',
            success: function (data) {
                if (data.user) {
                  appendToUsrTable(data.user);
                }
            }
        });
      } else {
        alert(&quotAll fields must have a valid value.&quot);
    }
    $('form#addUser').trigger(&quotreset&quot);
    return false;
});
function appendToUsrTable(user) {
  $(&quot#userTable > tbody:last-child&quot).append(`
        <tr id=&quotuser-${user.id}&quot>
            <td class=&quotuserName&quot name=&quotname&quot>${user.name}</td>
            '<td class=&quotuserAddress&quot name=&quotaddress&quot>${user.address}</td>
            '<td class=&quotuserAge&quot name=&quotage&quot>${user.age}</td>
            '<td align=&quotcenter&quot>
                <button class=&quotbtn btn-success form-control&quot =&quoteditUser(${user.id})&quot data-toggle=&quotmodal&quot data-target=&quot#myModal&quot)&quot>EDIT</button>
            </td>
            <td align=&quotcenter&quot>
                <button class=&quotbtn btn-danger form-control&quot =&quotdeleteUser(${user.id})&quot>DELETE</button>
            </td>
        </tr>
    `);
}

{% endblock javascript %}

عملکرد JQuery فوق به این صورت است که وقتی فرم id='addUser' را ارسال می کنید، مقادیر فیلدهای ورودی را می گیرد و فراخوانی ajax به سرور منتقل می شود.

$.ajax({
            url: '{% url &quotcrud_ajax_create&quot %}',
            data: {
                'name': nameInput,
                'address': addressInput,
                'age': ageInput
            },
            dataType: 'json',
            success: function (data) {
                if (data.user) {
                  appendToUsrTable(data.user);
                }
            }
});

اجازه دهید بفهمیم که درخواست ajax بالا به مرورگر چه دستوری می دهد.

URL – where resource is located:

url: '/ajax/crud/create/',

Data Type – Type of Data we want in return:

dataType: 'json',

Return Data – Dictionary of data what we want to send:

data: {
                'name': nameInput,
                'address': addressInput,
                'age': ageInput
      }

Success Response – Once we receive response from ajax, execute the code:

success: function (data) {
                if (data.user) {
                  appendToUsrTable(data.user);
                }
            }

زمانی که کاربر فرم را پر کرده و ارسال می کند. داده های ارسالی به سرور می رود و پس از تایید به پایگاه داده و تابع appendToUsrTable فراخوانی می شود. این تابع appendToUsrTable فقط یک jQuery است که در آن کاربری را که با استفاده از User Add Form اضافه کرده ایم اضافه می کند. هنگامی که یک کاربر اضافه می شود به شکل زیر خواهد بود:

Update User Django Ajax

# Views.py

class UpdateCrudUser(View):
    def  get(self, request):
        id1 = request.GET.get('id', None)
        name1 = request.GET.get('name', None)
        address1 = request.GET.get('address', None)
        age1 = request.GET.get('age', None)

        obj = CrudUser.objects.get(id=id1)
        obj.name = name1
        obj.address = address1
        obj.age = age1
        obj.save()

        user = {'id':obj.id,'name':obj.name,'address':obj.address,'age':obj.age}

        data = {
            'user': user
        }
        return JsonResponse(data)

# urls.py

from django.urls import path
from crud_ajaximport  views  

urlpatterns = [
    path('crud/',  views.CrudView.as_view(), name='crud_ajax'),
    path('ajax/crud/create/',  views.CreateCrudUser.as_view(), name='crud_ajax_create'),
    path('ajax/crud/update/',  views.UpdateCrudUser.as_view(), name='crud_ajax_update'),
]

crud.html

...
// Create Django Ajax Call
$(&quotform#updateUser&quot).submit(function() {
    var idInput = $('input[name=&quotformId&quot]').val().trim();
    var nameInput = $('input[name=&quotformName&quot]').val().trim();
    var addressInput = $('input[name=&quotformAddress&quot]').val().trim();
    var ageInput = $('input[name=&quotformAge&quot]').val().trim();
    if (nameInput && addressInput && ageInput) {
        // Create Ajax Call
        $.ajax({
            url: '{% url &quotcrud_ajax_update&quot %}',
            data: {
                'id': idInput,
                'name': nameInput,
                'address': addressInput,
                'age': ageInput
            },
            dataType: 'json',
            success: function (data) {
                if (data.user) {
                  updateToUserTabel(data.user);
                }
            }
        });
       } else {
        alert(&quotAll fields must have a valid value.&quot);
    }
    $('form#updateUser').trigger(&quotreset&quot);
    $('#myModal').modal('hide');
    return false;
});

// Update Django Ajax Call
function editUser(id) {
  if (id) {
    tr_id = &quot#user-&quot + id;
    name = $(tr_id).find(&quot.userName&quot).text();
    address = $(tr_id).find(&quot.userAddress&quot).text();
    age = $(tr_id).find(&quot.userAge&quot).text();
    $('#form-id').val(id);
    $('#form-name').val(name);
    $('#form-address').val(address);
    $('#form-age').val(age);
  }
}
function updateToUserTabel(user){
    $(&quot#userTable #user-&quot + user.id).children(&quot.userData&quot).each(function() {
        var attr = $(this).attr(&quotname&quot);
        if (attr == &quotname&quot) {
          $(this).text(user.name);
        } else if (attr == &quotaddress&quot) {
          $(this).text(user.address);
        } else {
          $(this).text(user.age);
        }
      });
}

به‌روزرسانی کاربر مشابه Create User است. در views.py به جای ایجاد پرس و جو، از کوئری به روز رسانی استفاده می کنیم.

در فراخوانی Ajax Request، یک پارامتر id دیگر برای شناسایی ردیف در پایگاه داده ارسال می کنیم

ما همچنین از دو تابع jQuery استفاده می کنیم - editUser و updateToUserTabel

در editUser – برای به روز رسانی فرم id=”updateUser” که داخل modal است استفاده می شود. و updateToUserTabel در موفقیت درخواست Ajax برای به‌روزرسانی جزئیات کاربری که به‌روزرسانی کرده‌ایم استفاده می‌شود.

Delete User Django Ajax

# Views.py

class DeleteCrudUser(View):
    def  get(self, request):
        id1 = request.GET.get('id', None)
        CrudUser.objects.get(id=id1).delete()
        data = {
            'deleted': True
        }
        return JsonResponse(data)

# urls.py

from django.urls import path
from crud_ajax import views 

urlpatterns = [
    path('crud/',  views.CrudView.as_view(), name='crud_ajax'),
    path('ajax/crud/create/',  views.CreateCrudUser.as_view(), name='crud_ajax_create'),
    path('ajax/crud/update/',  views.UpdateCrudUser.as_view(), name='crud_ajax_update'),
    path('ajax/crud/delete/',  views.DeleteCrudUser.as_view(), name='crud_ajax_delete'),
]

Crud.html

// Delete Django Ajax Call
function deleteUser(id) {
  var action = confirm(&quotAre you sure you want to delete this user?&quot);
  if (action != false) {
    $.ajax({
        url: '{% url &quotcrud_ajax_delete&quot %}',
        data: {
            'id': id,
        },
        dataType: 'json',
        success: function (data) {
            if (data.deleted) {
              $(&quot#userTable #user-&quot + id).remove();
            }
        }
    });
  }
}

حذف کاربر با استفاده از Ajax Django یکی از ساده ترین راه ها است. در درخواست ajax، ما یک شناسه از شی را ارسال می کنیم که می خواهیم آن را حذف کنیم تا مشاهده شود. در View، query حذف اجرا می شود و پرچم حذف شده در Response ارسال می شود. در موفقیت، ما مستقیماً تابع jQuery را می نویسیم تا بخشی را که می خواهیم با استفاده از id به صورت پویا از جدول حذف کنیم، حذف می کنیم.

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

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

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

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

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

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

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

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

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

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

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