tejariapp-new-logotejariapp-new-logotejariapp-new-logotejariapp-new-logo
  • صفحه اصلی
  • پروژه ها
    • پروژه طراحی سایت
    • پروژه های اندروید
    • پروژه های تحت ویندوز
    • UI & UX
    • ربات تلگرام
  • سفارش پروژه
    • انجام پروژه اندروید (Android)
    • طراحی و ساخت اپلیکیشن موبایل
    • انجام پروژه طراحی سایت با php
    • انجام پروژه طراحی سایت با Asp.net
    • انجام پروژه سی شارپ
    • فرم سفارش پروژه
  • مدرسه ی تجاری اپ
    • طراحی سایت
    • اندروید
    • سی شارپ
    • آموزش پایگاه داده
    • برنامه های کاربردی
  • لینک های مفید
    • پرداخت آنلاین
    • درباره تجاری اپ
    • تماس با ما
استخدام برنامه نویس متلب
سفارش پروژه
✕
            هیچ نتیجه ای یافت نشدمشاهده همه نتایج

            عملیات CRUD با استفاده از Datatable و Ajax در لاراول 5.8

            • صفحه نخست
            • مدرسه ی تجاری اپ آموزش طراحی سایت
            • عملیات CRUD با استفاده از Datatable و Ajax در لاراول 5.8
            آموزش کتابخانه Gson برای تبدیل جیسون در اندروید
            کتابخانه Gson | آموزش کتابخانه Gson برای تبدیل جیسون در اندروید
            31 اردیبهشت 1398
            معرفی رابطه یک به یک (One To One) در لاراول
            معرفی رابطه یک به یک (One To One) در لاراول
            13 خرداد 1398
            منتشر شده توسط مدیر سایت
            عملیات CRUD با استفاده از Datatable و Ajax در لاراول 5.8

            عملیات CRUD با استفاده از Datatable و Ajax در لاراول 5.8

            آموزش عملیات CRUD با استفاده از Datatable و Ajax در لاراول 5.8  ، در این پست از تجاری اپ قصد داریم ایجاد عملیات CRUD با استفاده از Datatable ، Ajax و modal در لاراول 5.8  را به شما اموزش دهیم.در این آموزش ما افزودن ، بروزرسانی و حذف رکودها را با Modal و صفحه بندی (pagination) در لاراول 5.8 ایجاد خواهیم کرد.

            ما برای لیست رکوردها به همراه صفحه بندی ، مرتب سازی و فیلتر (جستجو) از yajra datatable استفاده خواهیم کرد.همچنین برای ایجاد رکورد جدید و بروزرسانی رکوردهای جدید از Modal در بوت استرپ (bootstrap) استفاده خواهیم کرد.و برای ایجاد crud (create read update delete) از resource routes در لاراول 5.8 استفاده می کنیم.

            عملیات CRUD با استفاده از Datatable

            در این پست عملیات CRUD با استفاده از Datatable و Ajax در لاراول 5.8  را به صورت گام به گام به شما آموزش می دهیم.شما کافیست این مراحل که در ادامه آورده ایم را دنبال کنید.با ما همراه باشید.

            همچنین بخوانید: آموزش دیتاتیبل (datatables) در لاراول 5.8

            1. نصب لاراول و پیکربندی اولیه
            2. نصب پکیج Yajra Datatable
            3. ایجاد جدول
            4. ایجاد Resource Route
            5. ایجاد کنترلر و مدل
            6. ایجاد فایل Blade

            نصب لاراول و پیکربندی اولیه

            برای هر پروژه لاراول ما نیاز داریم که لاراول را نصب کنیم. به همین دلیل ما یک مقاله در رابطه با چگونگی نصب و پیکربندی اولیه لاراول آماده کرده ایم که می توانید از اینجا ان را مشاهده نمایید : آموزش نصب لاراول به همراه تنظیمات اولیه

            نصب پکیج Yajra Datatable عملیات CRUD با استفاده از Datatable

            ما برای datatable باید پکیج Yajra Datatable را نصب کنیم. بنابراین شما می توانید با دستور زیر این پکیج را نصب کنید:

            composer require yajra/laravel-datatables-oracle
            

            بعد از نصب این پکیج شما نیاز دارید providers و alias را ست کنید:

            config/app.php

            'providers' => [
                ...,
                Yajra\DataTables\DataTablesServiceProvider::class,
            ]
            
            'aliases' => [
                ...,
                'DataTables' => Yajra\DataTables\Facades\DataTables::class,
            ]
            

            ایجاد جدول

            ما در این آموزش قصد داریم عملیات CRUD با استفاده از Datatable و Ajax در لاراول را برای محصول (product) ایجاد کنیم.بنابراین ما با استفاده از دستور زیر یک migration برای جدول “products” در لاراول 5.8 ایجاد می کنیم:

            php artisan make:migration create_products_table --create=products
            

            پس از اجرای دستور بالا یک فایل با نام تعیین شده در مسیر “database/migrations” مشاهده خواهید کرد ، این فایل را باز کنید و کدهای زیر را برای ایجاد جدول products در آن قرار دهید:

            <?php
            
            use Illuminate\Support\Facades\Schema;
            use Illuminate\Database\Schema\Blueprint;
            use Illuminate\Database\Migrations\Migration;
            
            class CreateProductsTable extends Migration
            {
                /**
                 * Run the migrations.
                 *
                 * @return void
                 */
                public function up()
                {
                    Schema::create('products', function (Blueprint $table) {
                        $table->increments('id');
                        $table->string('name');
                        $table->text('detail');
                        $table->timestamps();
                    });
                }
                
                /**
                 * Reverse the migrations.
                 *
                 * @return void
                 */
                public function down()
                {
                    Schema::dropIfExists('products');
                }
            }
            

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

            php artisan migrate
            

            ایجاد Resource Route

            در این مرحله ما باید برای عملیات CRUD محصول resource route را به برنامه اضافه کنیم.بنابراین فایل “routes/web.php” را باز کنید و route های زیر را به آن اضافه کنید:

            routes/web.php

            Route::resource('ajaxproducts','ProductAjaxController');
            

            ایجاد کنترلر و مدل

            در این مرحله ما باید یک کنترلر جدید با نام ” ProductAjaxController” و یک مدل با نام “Product” ایجاد کنیم.بنابرابن دستور زیر را برای ایجاد یک کنترلر و مدل جدید اجرا کنید:

            php artisan make:controller ProductAjaxController --resource --model=Product
            

            بعد از ایجاد کنترلر به فایل  app/Http/Controllers/ProductAjaxController.php بروید و کدهای زیر را درآن قرار دهید:

            app/Http/Controllers/ProductAjaxController.php

            <?php
            
            namespace App\Http\Controllers;
            
            use App\Product;
            use Illuminate\Http\Request;
            use DataTables;
            
            class ProductAjaxController extends Controller
            {
                /**
                 * Display a listing of the resource.
                 *
                 * @return \Illuminate\Http\Response
                 */
                public function index(Request $request)
                {
                    if ($request->ajax()) {
                        $data = Product::latest()->get();
                        return Datatables::of($data)
                            ->addIndexColumn()
                            ->addColumn('action', function($row){
                                $btn = '<a href="javascript:void(0)" data-toggle="tooltip"  data-id="'.$row->id.'" data-original-title="Edit" class="edit btn btn-primary btn-sm editProduct">ویرایش</a>';
                                $btn = $btn.' <a href="javascript:void(0)" data-toggle="tooltip"  data-id="'.$row->id.'" data-original-title="Delete" class="btn btn-danger btn-sm deleteProduct">حذف</a>';
            
                                return $btn;
                            })
                            ->rawColumns(['action'])
                            ->make(true);
                    }
                    return view('productAjax');
                }
            
                /**
                 * Store a newly created resource in storage.
                 *
                 * @param  \Illuminate\Http\Request  $request
                 * @return \Illuminate\Http\Response
                 */
                public function store(Request $request)
                {
                    Product::updateOrCreate(['id' => $request->product_id],
                        ['name' => $request->name, 'detail' => $request->detail]);
            
                    return response()->json(['success'=>'محصول با موفقیت ذخیره شد.']);
                }
                /**
                 * Show the form for editing the specified resource.
                 *
                 * @param  \App\Product  $product
                 * @return \Illuminate\Http\Response
                 */
                public function edit($id)
                {
                    $product = Product::find($id);
                    return response()->json($product);
                }
            
                /**
                 * Remove the specified resource from storage.
                 *
                 * @param  \App\Product  $product
                 * @return \Illuminate\Http\Response
                 */
                public function destroy($id)
                {
                    Product::find($id)->delete();
                    return response()->json(['success'=>'محصول با موفقیت حذف شد.']);
                }
            }
            

            سپس فایل مدل app/Product.php را باز کنید و کدهای زیر را در آن قرار دهید:

            app/Product.php

            <?php
            
            namespace App;
            
            use Illuminate\Database\Eloquent\Model;
            
            class Product extends Model
            {
                protected $fillable = [
                    'name', 'detail'
                ];
            }
            

            ایجاد فایل Blade

            در این مرحله که مرحله آخر اموزش ما نیز می باشد ما باید یک فایل Blade ایجاد کنیم ، پس به مسیر resources/views بروید و یک فایل Blade با نام ” productAjax.blade.php” ایجاد کنید و کدهای زیر را در آن قرار دهید:

            resources/views/productAjax.blade.php

            <!DOCTYPE html>
            <html>
            <head>
                <title>عملیات CRUD با استفاده از Datatable و Ajax در لاراول 5.8 | تجاری اپ</title>
                <meta name="csrf-token" content="{{ csrf_token() }}">
                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
                <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
                <link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet">
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
                <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
                <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
                <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
            
                <style>
                    body {
                        direction: rtl;
                        text-align: right;
                        background-color: #FFF5EE;
                    }
                    .container h1 {
                        font-size: 2rem;
                        text-align: center;
                        margin: 50px 0;
                    }
                </style>
            </head>
            <body>
            
            <div class="container">
                <h1>عملیات CRUD با استفاده از Datatable و Ajax در لاراول 5.8 - تجاری اپ</h1>
                <a class="btn btn-success" href="javascript:void(0)" id="createNewProduct"> ایجاد محصول جدید</a>
                <table class="table table-bordered data-table">
                    <thead>
                    <tr>
                        <th>ردیف</th>
                        <th>نام</th>
                        <th>جزئیات محصول</th>
                        <th width="280px">عملیات</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
            
            <div class="modal fade" id="ajaxModel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title" id="modelHeading"></h4>
                        </div>
                        <div class="modal-body">
                            <form id="productForm" name="productForm" class="form-horizontal">
                                <input type="hidden" name="product_id" id="product_id">
                                <div class="form-group">
                                    <label for="name" class="col-sm-4 control-label">نام</label>
                                    <div class="col-sm-12">
                                        <input type="text" class="form-control" id="name" name="name" placeholder="نام را وارد کنید" value="" maxlength="50" required="">
                                    </div>
                                </div>
            
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">جزئیات محصول</label>
                                    <div class="col-sm-12">
                                        <textarea id="detail" name="detail" required="" placeholder="جزئیات محصول را وارد کنید" class="form-control"></textarea>
                                    </div>
                                </div>
            
                                <div class="col-sm-offset-2 col-sm-10">
                                    <button type="submit" class="btn btn-primary" id="saveBtn" value="create">ذخیره تغییرات
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            
            </body>
            
            <script type="text/javascript">
                $(function () {
            
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });
            
                    var table = $('.data-table').DataTable({
                        "oLanguage":{
                            "sEmptyTable":     "هیچ داده ای در جدول وجود ندارد",
                            "sInfo":           "نمایش _START_ تا _END_ از _TOTAL_ رکورد",
                            "sInfoEmpty":      "نمایش 0 تا 0 از 0 رکورد",
                            "sInfoFiltered":   "(فیلتر شده از _MAX_ رکورد)",
                            "sInfoPostFix":    "",
                            "sInfoThousands":  ",",
                            "sLengthMenu":     "نمایش _MENU_ رکورد",
                            "sLoadingRecords": "در حال بارگزاری...",
                            "sProcessing":     "در حال پردازش...",
                            "sSearch":         "جستجو:",
                            "sZeroRecords":    "رکوردی با این مشخصات پیدا نشد",
                            "oPaginate": {
                                "sFirst":    "ابتدا",
                                "sLast":     "انتها",
                                "sNext":     "بعدی",
                                "sPrevious": "قبلی"
                            },
                            "oAria": {
                                "sSortAscending":  ": فعال سازی نمایش به صورت صعودی",
                                "sSortDescending": ": فعال سازی نمایش به صورت نزولی"
                            }
                        },
                        processing: true,
                        serverSide: true,
                        ajax: "{{ route('ajaxproducts.index') }}",
                        columns: [
                            {data: 'DT_RowIndex', name: 'DT_RowIndex'},
                            {data: 'name', name: 'name'},
                            {data: 'detail', name: 'detail'},
                            {data: 'action', name: 'action', orderable: false, searchable: false},
                        ]
                    });
            
                    $('#createNewProduct').click(function () {
                        $('#saveBtn').val("create-product");
                        $('#product_id').val('');
                        $('#productForm').trigger("reset");
                        $('#modelHeading').html("ایحاد محصول جدید");
                        $('#ajaxModel').modal('show');
                    });
            
                    $('body').on('click', '.editProduct', function () {
                        var product_id = $(this).data('id');
                        $.get("{{ route('ajaxproducts.index') }}" +'/' + product_id +'/edit', function (data) {
                            $('#modelHeading').html("ویرایش محصول");
                            $('#saveBtn').val("edit-user");
                            $('#ajaxModel').modal('show');
                            $('#product_id').val(data.id);
                            $('#name').val(data.name);
                            $('#detail').val(data.detail);
                        })
                    });
            
                    $('#saveBtn').click(function (e) {
                        e.preventDefault();
                        $(this).html('ثبت..');
            
                        $.ajax({
                            data: $('#productForm').serialize(),
                            url: "{{ route('ajaxproducts.store') }}",
                            type: "POST",
                            dataType: 'json',
                            success: function (data) {
            
                                $('#productForm').trigger("reset");
                                $('#ajaxModel').modal('hide');
                                table.draw();
            
                            },
                            error: function (data) {
                                console.log('Error:', data);
                                $('#saveBtn').html('ذخیره تغییرات');
                            }
                        });
                    });
            
                    $('body').on('click', '.deleteProduct', function () {
            
                        var product_id = $(this).data("id");
                        confirm("آیا شما می خواهید این محصول را حذف کنید؟");
            
                        $.ajax({
                            type: "DELETE",
                            url: "{{ route('ajaxproducts.store') }}"+'/'+product_id,
                            success: function (data) {
                                table.draw();
                            },
                            error: function (data) {
                                console.log('Error:', data);
                            }
                        });
                    });
            
                });
            </script>
            </html>
            

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

            php artisan serve
            

            اکنون می توانید برای مشاهده برنامه خود آدرس زیر را در مرورگر خود بازکنید:

            همچنین بخوانید: استفاده از کتابخانه SweetAlert2 با AJAX در لاراول

            http://localhost:8000/ajaxproducts

            امیدوارم این آموزش به شما کمک کرده باشد…

            اشتراک گذاری

            پست های مرتبط

            دستورات جریان کنترل (Control flow statements) یا دستورات شرطی و حلقه ها در زبان برنامه نویسی دارت Dart

            دستورات جریان کنترل (Control flow statements) یا دستورات شرطی و حلقه ها در زبان برنامه نویسی دارت Dart

            30 بهمن 1400

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


            ادامه مطلب
            آموزش عملگرها یا Operator ها در زبان برنامه نویسی دارت یا Dart

            آموزش عملگرها یا Operator ها در زبان برنامه نویسی دارت یا Dart

            30 بهمن 1400

            آموزش عملگرها یا Operator ها در زبان برنامه نویسی دارت (Dart)


            ادامه مطلب
            توابع در زبان برنامه نویسی دارت (Dart)

            توابع در زبان برنامه نویسی دارت (Dart)

            27 بهمن 1400

            توابع در زبان برنامه نویسی دارت (Dart)


            ادامه مطلب

            دیدگاهتان را بنویسید لغو پاسخ

            نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

            ساخت اپلیکیشن های موبایل

            • ساخت اپلیکیشن فروشگاهی
            • ساخت اپلیکشن ابزاری و خدماتی
            • ساخت اپلیکیشن آموزشی
            • و هزاران موضوع دیگر

             
            کلیک کنید

            آخرین دیدگاه ها

            • 7 خرداد 1401

              داودی نظر در آموزش استفاده از ckeditor همراه با آپلود عکس در لاراول 6

            • 6 فروردین 1401

              yasaman نظر در راست چین کردن متن در فیگما Figma

            • 3 فروردین 1401

              رضا نظر در مفاهیم Observable و Observer در RxJava

            تجاری اپ در شبکه های اجتماعی

            لوگوی تایید پرداخت آنلاین

            2015-2022 © تمامي حقوق مادي و معنوي اين وب سايت نزد تجاری اپ محفوظ بوده و هر گونه کپي برداري از مطالب پيگرد قانوني به همراه دارد! | طراح سایت : ProgRun
            سفارش پروژه
                      هیچ نتیجه ای یافت نشدمشاهده همه نتایج