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

به نام آن که جان را فکرت آموخت / چراغ دل به نور جان برافروختبا عرض سلام و وقت بخیر خدمت کاربران محترم سایت ویرگول، در این مقاله آموزشی که چکیده آموزش جنگو از سایت Django documentation بهمراه مطالب تکمیلی تر , سعی شده یک آموزش کاربردی و پروژه محور از جنگو ارایه گردد.ایده این سری مقاله های آموزشی از این موضوع سرچشمه می گیرد که بخشی از خوانندگان وجود دارد که به محتوای نوشتاری آنلاین بهتر پاسخ می دهند و ترجیج می دهند مهارت های جدید را به سرعت از طریق خواندن افزایش دهند.این سری آموزش ها با ارایه اولین پکیج آموزشی در خصوص جنگو آغاز می شود که انتظار می رود با واکنش مثبت کاربران همراه شود.توجه: این مقاله به مرور زمان، ویرایش و یا تکمیل می‌شود!تقاضا: در صورتی که با مشکل تایپی، دستوری و یا مفهومی در این مقاله برخورد کردید، از شما دوست عزیز و گرامی، صمیمانه تقاضا می‌کنم که اینجانب را مطلع کرده، تا نسبت به تصحیح و یا تکمیل آن، در اسرع وقت، اقدام نمایم. با کمال تشکر جواد جهانگیریشماره تلفن همراه: 09149431772نشانی پست الکترونیکی: javad.jahangiri.niopdc@gmail.comفیلم‌های آموزشی در آپارات:جواد جهانگیری (CTO) - آپاراتفیلم آموزشی در یوتویب: javad jahangiri - YouTubeنسخه مقاله: ۱.۱ - تاریخ بروزرسانی: 1401/02/01برای دیدن فیلم اموزشی مربوطه به کانال آپاراتی بنده به ادرس جواد جهانگیری (CTO) - آپارات مراجعه نماییدسورس این پروژه بر روی github بنده در ادرس زیر موجود می باشدhttps://github.com/javadjahangiriniopdc/SimpleDjangoCrudAjaxBasic 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 در ارتباط باشید ...