Hay ..
Dalam tutorial kali ini saya akan membagikan sebuah tulisan mengenai CRUD Datatable Laravel 8 menggunakan package yajra/laravel-datatables . .
Pertama kita instal terlebih dahulu package diproject kita
pada config/app.php kita tambahkan ini
.png?1606717912701)
Untuk dokumentasi lebih lengkapnya bisa kunjungi link berikut ini
Dan kemudian ini
.png?1606718653589)
Kedua, kita buat sebuah migration nya
.png?1606717987043)
/database/migrations/2020_11_30_030356_create_products_table.php
.png?1606718083125)
Setalah itu kita lakukan migrate, bisa dengan perintah
php artisan migrateKemudian kita buat Controller dan Model nya
.png?1606718256117)
Kita tambahkan pada routes/web.php
.png?1606718368623)
Pada app/Http/Controllers/ProductController.php
<?php
namespace App\Http\Controllers;
use App\Models\Product;
use Illuminate\Http\Request;
use Yajra\DataTables\Facades\DataTables;
class ProductController extends Controller
{
public function index(Request $request)
{
if ($request->ajax()) {
# code...
$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">Edit</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">Delete</a>';
return $btn;
})
->rawColumns(['action'])
->make(true);
}
return view('product');
}
public function store(Request $request)
{
Product::updateOrCreate(
['id' => $request->product_id],
['name' => $request->name, 'detail' => $request->detail]
);
return response()->json(['success' => 'Product saved successfully']);
}
public function edit($id)
{
$product = Product::find($id);
return response()->json($product);
}
public function destroy($id)
{
Product::find($id)->delete();
return response()->json(['success' => 'product deleted Successfully']);
}
}
Pada app/Product.php
.png?1606718561642)
Kemudian kita buat sebuah view resources/views/product.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel 8 Ajax CRUD -- ASEPIT.COM</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>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js">
</script>
</head>
<style type="text/css">
.container{
margin-top:150px;
}
h4{
margin-bottom:30px;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 offset-md-2">
<div class="row">
<div class="col-md-12 text-center">
<h4>Laravel 8 Ajax CRUD -- ASEPIT.COM</h4>
</div>
<div class="col-md-12 text-right mb-5">
<a class="btn btn-success" href="javascript:void(0)"
id="createNewProduct"> Tambah Product</a>
</div>
<div class="col-md-12">
<table class="table table-condensed data-table">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Details</th>
<th width="280px">Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</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-2 control-label">Name</label>
<div class="col-sm-12">
<input type="text" class="form-control" id="name"
name="name" placeholder="Enter Name" value=""
maxlength="50" required="">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Details</label>
<div class="col-sm-12">
<textarea id="detail" name="detail" required=""
placeholder="Enter Details" 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">Save changes
</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({
processing: true,
serverSide: true,
ajax: "{{ route('products.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("Create New Product");
$('#ajaxModel').modal('show');
});
$('body').on('click', '.editProduct', function () {
var product_id = $(this).data('id');
$.get("{{ route('products.index') }}" +'/' + product_id +'/edit', function
(data){
$('#modelHeading').html("Edit Product");
$('#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('Sending..');
$.ajax({
data: $('#productForm').serialize(),
url: "{{ route('products.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('Save Changes');
}
});
});
$('body').on('click', '.deleteProduct', function (){
var product_id = $(this).data("id");
var result = confirm("Are You sure want to delete !");
if(result){
$.ajax({
type: "DELETE",
url: "{{ route('products.store') }}"+'/'+product_id,
success: function (data) {
table.draw();
},
error: function (data) {
console.log('Error:', data);
}
});
}else{
return false;
}
});
});
</script>
</html>
php artisan serve
http://localhost:8000/products
DONE ! !
Semoga Bermanfaat, Haturnuhun . .
Untuk link demonya disini
Comments