ajax-crud

web.php ProductController.php products.blade.php pagination_products.blade.php

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

</head>
  <body>
    
    <section>
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="row justify-content-between">
                        <div class="col-3"><input type="text" name="search" id="search" class="my-3 form-control" placeholder="Search Here"></div>
                        <div class="col-2 text-end"><a href="" class="btn btn-success my-3" data-bs-toggle="modal" data-bs-target="#CreateModal">Create</a></div>
                    </div>
                </div>
                <div class="col-12">
                    <div class="table-data">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                <th scope="col">#</th>
                                <th scope="col">Name</th>
                                <th scope="col">Price</th>
                                <th scope="col" class="text-center">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($products as $key=>$product)
                                <tr>
                                <th>{{ $key+1 }}</th>
                                <td>{{ $product->name }}</td>
                                <td>{{ $product->price }}</td>
                                <td class="text-center">
                                    <a href="" class="btn btn-primary UpdateLink" 
                                    data-bs-toggle="modal" 
                                    data-bs-target="#UpdateModal" 
                                    data-id="{{ $product->id }}" 
                                    data-name="{{ $product->name }}" 
                                    data-price="{{ $product->price }}">
                                    <i class="bi bi-pencil-square"></i></a>
                                    <a href="" class="btn btn-danger DeleteLink" 
                                    data-id="{{ $product->id }}">
                                        <i class="bi bi-trash-fill"></i>
                                    </a>
                                </td>
                                </tr>

@endforeach
                            </tbody>
                        </table>
                        {!! $products->links() !!}
                    </div>
                </div>
            </div>
        </div>
    </section>

<div class="modal fade" id="CreateModal" tabindex="-1" aria-labelledby="CreateModalLabel" aria-hidden="true">
        <form action="" method="post" id="CreateForm">
            @csrf
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="addModalLabel">Add</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="errMsgContainer"></div>
                        <div class="form-group mb-4">
                            <label for="name">Name</label>
                            <input type="text" class="form-control" name="name" id="name">
                        </div>
                        <div class="form-group mb-4">
                            <label for="price">Price</label>
                            <input type="text" class="form-control" name="price" id="price">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary CreateBtn">Save</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    
    <div class="modal fade" id="UpdateModal" tabindex="-1" aria-labelledby="UpdateModalLabel" aria-hidden="true">
        <form action="" method="post" id="UpdateForm">
            @csrf
            <input type="hidden" id="up_id">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="UpdateModalLabel">Update</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="errMsgContainer"></div>
                        <div class="form-group mb-4">
                            <label for="name">Name</label>
                            <input type="text" class="form-control" name="up_name" id="up_name">
                        </div>
                        <div class="form-group mb-4">
                            <label for="price">Price</label>
                            <input type="text" class="form-control" name="up_price" id="up_price">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary UpdateBtn">Update</button>
                    </div>
                </div>
            </div>
        </form>
    </div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js" integrity="sha512-VEd+nq25CkR676O+pLBnDW09R7VQX9Mdiij052gVCp5yVH3jGtH70Ho/UUv4mJDsEdTvqRCFZg0NKGiojGnUCw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    </script>

<script>
        $(document).ready(function(){ 
          // alert();

$(document).on('click','.CreateBtn',function(e){
            e.preventDefault();
            let name = $('#name').val();
            let price = $('#price').val();
            // console.log(name+price);
            $.ajax({
              url:"{{ url('/product/store') }}",
              method:"post",
              data:{name:name,price:price},
              success:function(res){
                if(res.status=='success'){
                  $('#CreateModal').modal('hide');
                  $('#CreateForm')[0].reset();
                  $('.table').load(location.href+' .table');
                  Command: toastr["success"]("Successfully Done", "Added")
                  toastr.options = {
                    "closeButton": true,
                    "debug": false,
                    "newestOnTop": false,
                    "progressBar": true,
                    "positionClass": "toast-top-right",
                    "preventDuplicates": false,
                    "onclick": null,
                    "showDuration": "300",
                    "hideDuration": "1000",
                    "timeOut": "5000",
                    "extendedTimeOut": "1000",
                    "showEasing": "swing",
                    "hideEasing": "linear",
                    "showMethod": "fadeIn",
                    "hideMethod": "fadeOut"
                  }
                }
              },
              error:function(err){
                let error = err.responseJSON;
                $.each(error.errors,function(index, value){
                  $('.errMsgContainer').append('<span class="text-danger">'+value+'</span>'+'<br>');
                });
              }
            });
          });

$(document).on('click','.UpdateLink',function(){
            let id = $(this).data('id');
            let name = $(this).data('name');
            let price = $(this).data('price');

$('#up_id').val(id);
            $('#up_name').val(name);
            $('#up_price').val(price);
          });

$(document).on('click','.UpdateBtn',function(e){
            e.preventDefault();
            let up_id = $('#up_id').val();
            let up_name = $('#up_name').val();
            let up_price = $('#up_price').val();
            // console.log(name+price);
            $.ajax({
              url:"{{ url('/product/update') }}",
              method:"post",
              data:{up_id:up_id,up_name:up_name,up_price:up_price},
              success:function(res){
                if(res.status=='success'){
                  $('#UpdateModal').modal('hide');
                  $('#UpdateForm')[0].reset();
                  $('.table').load(location.href+' .table');
                  Command: toastr["info"]("Successfully Done", "Updated")
                  toastr.options = {
                    "closeButton": true,
                    "debug": false,
                    "newestOnTop": false,
                    "progressBar": true,
                    "positionClass": "toast-top-right",
                    "preventDuplicates": false,
                    "onclick": null,
                    "showDuration": "300",
                    "hideDuration": "1000",
                    "timeOut": "5000",
                    "extendedTimeOut": "1000",
                    "showEasing": "swing",
                    "hideEasing": "linear",
                    "showMethod": "fadeIn",
                    "hideMethod": "fadeOut"
                  }
                }
              },error:function(err){
                let error = err.responseJSON;
                $.each(error.errors,function(index, value){
                  $('.errMsgContainer').append('<span class="text-danger">'+value+'</span>'+'<br>');
                });
              }
            });
          });

$(document).on('click','.DeleteLink',function(e){
            e.preventDefault();
            let product_id = $(this).data('id');
            // console.log(name+price);
            if(confirm('Are you sure ?')){
                $.ajax({
                url:"{{ url('/product/delete') }}",
                method:"post",
                data:{product_id:product_id},
                success:function(res){
                  if(res.status=='success'){
                    $('.table').load(location.href+' .table');
                    Command: toastr["error"]("Successfully Done", "Deleted")
                    toastr.options = {
                      "closeButton": true,
                      "debug": false,
                      "newestOnTop": false,
                      "progressBar": true,
                      "positionClass": "toast-top-right",
                      "preventDuplicates": false,
                      "onclick": null,
                      "showDuration": "300",
                      "hideDuration": "1000",
                      "timeOut": "5000",
                      "extendedTimeOut": "1000",
                      "showEasing": "swing",
                      "hideEasing": "linear",
                      "showMethod": "fadeIn",
                      "hideMethod": "fadeOut"
                    }
                  }
                }
              });
            }
          });

$(document).on('click','.pagination a', function(e){
            e.preventDefault();
            let page = $(this).attr('href').split('page=')[1]
            product(page)
          });
          function product(page){
            $.ajax({
              url:"/pagination/paginate-data?page="+page,
              success:function(res){
                $('.table-data').html(res);
              }
            });
          }

$(document).on('keyup',function(e){
            e.preventDefault();
            let search_string = $('#search').val();
            // console.log(search_string);
            $.ajax({
              url:"{{ url('/product/search') }}",
              method:'GET',
              data:{search_string:search_string},
              success:function(res){
                $('.table-data').html(res);
                if(res.status=='nothing_found'){
                  $('.table-data').html('<span class="text-danger">'+'Nothing Found'+'</span>');
                }
              }
            });
          });

});
    </script>

</body>
</html>

web.php
use App\Http\Controllers\ProductController;
Route::get('/',[ProductController::class,'products'])->name('products');
Route::post('/add-product',[ProductController::class,'addProduct'])->name('add.product');
Route::post('/update-product',[ProductController::class,'updateProduct'])->name('update.product');
Route::post('/delete-product',[ProductController::class,'deleteProduct'])->name('delete.product');
Route::get('/pagination/paginate-data',[ProductController::class,'pagination']);
Route::get('/search-product',[ProductController::class,'searchProduct'])->name('search.product');

App\Providers\AppServiceProvider.php
use Illuminate\Pagination\Paginator;
    public function boot()
    {
        Paginator::useBootstrap();
    }
    
database\migrations\products
    public function up()
    {
        Schema::create('products', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->double('price');
            $table->timestamps();
        });
    }
 
App\Http\Controllers\ProductController.php
use App\Models\Product;
{
    public function products(){
        $products = Product::latest()->paginate(3);
        return view('products',compact('products'));
    }
    public function addProduct(Request $request){
        $request->validate(
            [
                'name'=>'required|unique:products',
                'price'=>'required',
            ],
            [
                'name.required'=>'Name is Required',
                'name.unique'=>'Product Already Exists',
                'price.required'=>'Price is Required',
            ]
        );
        $product = new Product();
        $product->name = $request->name;
        $product->price = $request->price;
        $product->save();
        return response()->json([
            'status'=>'success',
        ]);

}
    public function updateProduct(Request $request){
        $request->validate(
            [
                'up_name'=>'required|unique:products,name,'.$request->up_id,
                'up_price'=>'required',
            ],
            [
                'up_name.required'=>'Name is Required',
                'up_name.unique'=>'Product Already Exists',
                'up_price.required'=>'Price is Required',
            ]
        );
        Product::where('id',$request->up_id)->update([
            'name'=>$request->up_name,
            'price'=>$request->up_price,
        ]);
        return response()->json([
            'status'=>'success',
        ]);

}
    public function deleteProduct(Request $request){
        Product::find($request->product_id)->delete();
        return response()->json([
            'status'=>'success',
        ]);
    }
    public function pagination(Request $request){
        $products = Product::latest()->paginate(3);
        return view('pagination_products',compact('products'))->render(); 
    }
    public function searchProduct(Request $request){
        $products = Product::where('name','like','%'.$request->search_string.'%')
                    ->orWhere('price','like','%'.$request->search_string.'%')
                    ->orderBy('id','desc')
                    ->paginate(5);

if($products->count() >= 1){
                return view('pagination_products',compact('products'))->render();
            }else{
                return response()->json([
                    'status'=>'nothing found'
                ]);
            }
    }
}

products.blade.php
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css">
    
    <link rel="stylesheet" href="http://cdn.bootcss.com/toastr.js/latest/css/toastr.min.css">
  </head>
  <body>
    
    <section>
        <div class="container">
            <div class="row">
                <div class="col-2"></div>
                <div class="col-8">
                    
                    <a href="" class="btn btn-success my-3" data-bs-toggle="modal" data-bs-target="#addModal">Add Product</a>
                    <input type="text" name="search" id="search" class="my-3 form-control" placeholder="Search Here">
                    <div class="table-data">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                
                                <th scope="col">ID</th>
                                <th scope="col">Name</th>
                                <th scope="col">Price</th>
                                <th scope="col">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($products as $key=>$product)
                                <tr>
                                
                                <td>{{ $product->id }}</td>
                                <td>{{ $product->name }}</td>
                                <td>{{ $product->price }}</td>
                                <td>
                                    <a href="" class="btn btn-primary update_product_form" 
                                    data-bs-toggle="modal" 
                                    data-bs-target="#updateModal" 
                                    data-id="{{ $product->id }}" 
                                    data-name="{{ $product->name }}" 
                                    data-price="{{ $product->price }}">
                                    <i class="bi bi-pencil-square"></i></a>

<a href="" class="btn btn-danger delete_product" 
                                    data-id="{{ $product->id }}">
                                        <i class="bi bi-trash-fill"></i>
                                    </a>
                                </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                        {!! $products->links() !!}
                    </div>
                </div>
            </div>
        </div>
    </section>

@include('add_product_modal')
    @include('update_product_modal')
    @include('product_js')
    {!! Toastr::message() !!}
  </body>
</html>

product_js.blade.php
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
    
    <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
    
    <script src="http://cdn.bootcss.com/toastr.js/latest/js/toastr.min.js"></script>
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    </script>
    <script>
        $(document).ready(function(){ 
          // alert();

$(document).on('click','.add_product',function(e){
            e.preventDefault();
            let name = $('#name').val();
            let price = $('#price').val();
            // console.log(name+price);
            $.ajax({
              url:"{{ route('add.product') }}",
              method:"post",
              data:{name:name,price:price},
              success:function(res){
                if(res.status=='success'){
                  $('#addModal').modal('hide');
                  $('#addProductForm')[0].reset();
                  $('.table').load(location.href+' .table');
                  Command: toastr["success"]("Product Added", "Success")
                  toastr.options = {
                    "closeButton": true,
                    "debug": false,
                    "newestOnTop": false,
                    "progressBar": true,
                    "positionClass": "toast-top-right",
                    "preventDuplicates": false,
                    "onclick": null,
                    "showDuration": "300",
                    "hideDuration": "1000",
                    "timeOut": "5000",
                    "extendedTimeOut": "1000",
                    "showEasing": "swing",
                    "hideEasing": "linear",
                    "showMethod": "fadeIn",
                    "hideMethod": "fadeOut"
                  }
                }
              },error:function(err){
                let error = err.responseJSON;
                $.each(error.errors,function(index, value){
                  $('.errMsgContainer').append('<span class="text-danger">'+value+'</span>'+'<br>');
                });
              }
            });
          });

$(document).on('click','.update_product_form',function(){
            let id = $(this).data('id');
            let name = $(this).data('name');
            let price = $(this).data('price');

$('#up_id').val(id);
            $('#up_name').val(name);
            $('#up_price').val(price);
          });

$(document).on('click','.update_product',function(e){
            e.preventDefault();
            let up_id = $('#up_id').val();
            let up_name = $('#up_name').val();
            let up_price = $('#up_price').val();
            // console.log(name+price);
            $.ajax({
              url:"{{ route('update.product') }}",
              method:"post",
              data:{up_id:up_id,up_name:up_name,up_price:up_price},
              success:function(res){
                if(res.status=='success'){
                  $('#updateModal').modal('hide');
                  $('#updateProductForm')[0].reset();
                  $('.table').load(location.href+' .table');
                  Command: toastr["info"]("Product Updated", "Success")
                  toastr.options = {
                    "closeButton": true,
                    "debug": false,
                    "newestOnTop": false,
                    "progressBar": true,
                    "positionClass": "toast-top-right",
                    "preventDuplicates": false,
                    "onclick": null,
                    "showDuration": "300",
                    "hideDuration": "1000",
                    "timeOut": "5000",
                    "extendedTimeOut": "1000",
                    "showEasing": "swing",
                    "hideEasing": "linear",
                    "showMethod": "fadeIn",
                    "hideMethod": "fadeOut"
                  }
                }
              },error:function(err){
                let error = err.responseJSON;
                $.each(error.errors,function(index, value){
                  $('.errMsgContainer').append('<span class="text-danger">'+value+'</span>'+'<br>');
                });
              }
            });
          });

$(document).on('click','.delete_product',function(e){
            e.preventDefault();
            let product_id = $(this).data('id');
            // console.log(name+price);

if(confirm('Are you sure')){
                $.ajax({
                url:"{{ route('delete.product') }}",
                method:"post",
                data:{product_id:product_id},
                success:function(res){
                  if(res.status=='success'){
                    $('.table').load(location.href+' .table');
                    Command: toastr["error"]("Product Deleted", "Success")
                    toastr.options = {
                      "closeButton": true,
                      "debug": false,
                      "newestOnTop": false,
                      "progressBar": true,
                      "positionClass": "toast-top-right",
                      "preventDuplicates": false,
                      "onclick": null,
                      "showDuration": "300",
                      "hideDuration": "1000",
                      "timeOut": "5000",
                      "extendedTimeOut": "1000",
                      "showEasing": "swing",
                      "hideEasing": "linear",
                      "showMethod": "fadeIn",
                      "hideMethod": "fadeOut"
                    }
                  }
                }
              });
            }

});

$(document).on('keyup',function(e){
            e.preventDefault();
            let search_string = $('#search').val();
            // console.log(search_string);
            $.ajax({
              url:"{{ route('search.product') }}",
              method:'GET',
              data:{search_string:search_string},
              success:function(res){
                $('.table-data').html(res);
                if(res.status=='nothing_found'){
                  $('.table-data').html('<span class="text-danger">'+'Nothing Found'+'</span>');
                }
              }
            });
          });

});
    </script>
    
add_product_modal.blade.php

<div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="addModalLabel" aria-hidden="true">
  <form action="" method="post" id="addProductForm">
    @csrf
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="addModalLabel">Add Product</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">

</div>

<div class="form-group mb-4">
          <label for="name">Product Name</label>
          <input type="text" class="form-control" name="name" id="name">
        </div>
        <div class="form-group mb-4">
          <label for="price">Product Price</label>
          <input type="text" class="form-control" name="price" id="price">
        </div>

</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary add_product">Save Product</button>
      </div>
    </div>
  </div>
  </form>
</div>
update_product_modal.blade.php

<div class="modal fade" id="updateModal" tabindex="-1" aria-labelledby="updateModalLabel" aria-hidden="true">
  <form action="" method="post" id="updateProductForm">
    @csrf
    <input type="hidden" id="up_id">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="updateModalLabel">Update Product</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">

</div>

<div class="form-group mb-4">
          <label for="name">Product Name</label>
          <input type="text" class="form-control" name="up_name" id="up_name">
        </div>
        <div class="form-group mb-4">
          <label for="price">Product Price</label>
          <input type="text" class="form-control" name="up_price" id="up_price">
        </div>

pagination_products.blade.php
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                
                                <th scope="col">ID</th>
                                <th scope="col">Name</th>
                                <th scope="col">Price</th>
                                <th scope="col">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($products as $key=>$product)
                                <tr>
                                
                                <td>{{ $product->id }}</td>
                                <td>{{ $product->name }}</td>
                                <td>{{ $product->price }}</td>
                                <td>
                                    <a href="" class="btn btn-primary update_product_form" 
                                    data-bs-toggle="modal" 
                                    data-bs-target="#updateModal" 
                                    data-id="{{ $product->id }}" 
                                    data-name="{{ $product->name }}" 
                                    data-price="{{ $product->price }}">
                                    <i class="bi bi-pencil-square"></i></a>