آموزش عملیات 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

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