Laravel 6 - Ajax CRUD With yajra Datatable and Bootstrap Model Validation Example
In this article, we will share with you how to create laravel Ajax CRUD example with yajra datatable and bootstrap model validation and also image upload.
if you don't have any kind of knowledge of laravel then don't worry in this article we will explain everything about all steps by step. after completing all the steps then you can run your first laravel application Ajax CRUD in your web browser. in this article, you will know everything about how to create laravel applications, how to create a migration, how to create a model, controller, views, and routes.
In web application many times you need to create Ajax CRUD for insert, update, delete or listing database data in frontend. if you don't want to page load when you insert, update, delete data then you should use Ajax in your laravel application and it is very smooth.
in this article we will cover the following steps :
- Step - 1 : Create the laravel fresh application.
- Step - 2 : Setup database in .env file.
- Step - 3 : Create products table migration.
- Step - 4 : Install yajra/laravel-datatables package.
- Step - 5 : Create routes.
- Step - 6 : Create Controllers.
- Step - 7 : Create Model.
- Step - 8 : Change layout.blade.php file.
- Step - 9 : Create Blade files.
After done this all the above step then your Ajax CRUD will be ready to run. this is a page CRUD application. no need to page refresh when we insert, update or delete any data. you can also learn some extra functionality int this article like how to install yajra datatable in laravel, model validation in laravel, how to refresh the yajra datatable this all functionality you can see in this one article.
Preview :
Step - 1 : Create the laravel fresh application.
First, we need to create one fresh laravel application help of composer command. just run the following command in your terminal and create one laravel application.
composer create-project --prefer-dist laravel/laravel productapplicationStep - 2 : Configure Database Setting.
Now, into the second step, we should configure database settings in .env file just open your .env file and make the following changes. set your database name, username, and password.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=paymenttransfer
DB_USERNAME=root
DB_PASSWORD=rootStep - 3 : Create Migration
Now, we need to create a migration for products the table. run the following command in your terminal.
php artisan make:migration create_productsAfter running this command, then open that created file that will be created on database/migrations folder. just open it and put the following code into that migration file.
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateProductsTbl extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('products', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('name');
$table->double('price', 8, 2);
$table->mediumText('description');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('products');
}
}and then run php artisan migrate commands in your terminal. then your products table will be created into your database, which you set into in your project .env file.
Step - 4 : Install yajra datatable package.
Now, we need to install yajra/laravel-datatables it in our laravel application. just run the following command on the laravel application root folder.
composer require yajra/laravel-datatables-oracleAfter installing the package, open your Laravel config file located at config/app.php and add the following lines. (it is optional for Laravel version >= 5.5)
Register provider and facade on your config/app.php file
'providers' => [
...,
Yajra\DataTables\DataTablesServiceProvider::class,
]
'aliases' => [
...,
'DataTables' => Yajra\DataTables\Facades\DataTables::class,
]After completing the step above, use the following command to publish configuration & assets:
$ php artisan vendor:publish --provider="Yajra\DataTables\DataTablesServiceProvider"Step - 5 : Create routes.
Now, we need to create the following laravel resouce route in your routes/web.php. if you don't know about laravel route resource then click this link Laravel route resource and get more information about it.
// Route for product listing.
Route::resource('products', 'ProductController');
// Route for get products for yajra post request.
Route::get('get-products', '[email protected]')->name('get-products');Step - 6 : Create Controller.
Now, we need to create ProductController.php file in app\Http\Controllers folder. just run the following command in your terminal and create your controller.
php artisan make:controller ProductController --resourceJust, open your ProductController.php file and write the following code into this controller.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Product;
class ProductController extends Controller
{
/**
* Create a new controller instance.
*
* @return void
*/
public function __construct()
{
$this->Product = new Product;
$this->title = 'Product';
$this->path = 'products';
}
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
return view($this->path.'.index');
}
/**
* Get the data for listing in yajra.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function getProducts(Request $request)
{
$data = $this->Product->getData();
return \DataTables::of($data)
->addColumn('Actions', function($data) {
return '<button type="button" class="btn btn-success btn-sm" id="getEditProductData" data-id="'.$data->id.'">Edit</button>
<button type="button" data-id="'.$data->id.'" data-toggle="modal" data-target="#DeleteProductModal" class="btn btn-danger btn-sm" id="getDeleteId">Delete</button>';
})
->rawColumns(['Actions'])
->make(true);
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$validator = \Validator::make($request->all(), [
'name' => 'required',
'description' => 'required',
'price' => 'required',
]);
if ($validator->fails()) {
return response()->json(['errors' => $validator->errors()->all()]);
}
$this->Product->storeData($request->all());
return response()->json(['success'=>'Product added successfully']);
}
/**
* Show the form for editing the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function edit($id)
{
$data = $this->Product->findData($id);
$html = '<div class="form-group">
<label for="Name">Name:</label>
<input type="text" class="form-control" name="name" id="editName" value="'.$data->name.'">
</div>
<div class="form-group">
<label for="Name">Price:</label>
<input type="text" class="form-control" name="price" id="editPrice" value="'.$data->price.'">
</div>
<div class="form-group">
<label for="Name">Description:</label>
<textarea class="form-control" name="description" id="editDescription">'.$data->description.'
</textarea>
</div>';
return response()->json(['html'=>$html]);
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param int $id
* @return \Illuminate\Http\Response
*/
public function update(Request $request, $id)
{
$validator = \Validator::make($request->all(), [
'name' => 'required',
'description' => 'required',
'price' => 'required',
]);
if ($validator->fails()) {
return response()->json(['errors' => $validator->errors()->all()]);
}
$this->Product->updateData($id, $request->all());
return response()->json(['success'=>'Product updated successfully']);
}
/**
* Remove the specified resource from storage.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
$this->Product->deleteData($id);
return response()->json(['success'=>'Product deleted successfully']);
}
}Step - 7 : Create Model
Now, we need to create app/Product.php model for write there our database business login for the data store, get, update and delete.
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Product extends Model
{
protected $table = 'products';
protected $guarded = array();
public function getData()
{
return static::orderBy('created_at','desc')->get();
}
public function storeData($input)
{
return static::create($input);
}
public function findData($id)
{
return static::find($id);
}
public function updateData($id, $input)
{
return static::find($id)->update($input);
}
public function deleteData($id)
{
return static::find($id)->delete();
}
}Step - 8 : Change into layout.blade.php file
Now, we need to some change in resources/views/layouts/app.blade.php file. because we need to two extra section in it one is @yield('style') and second is @yield('script')
After the change your laravel by default layout blade file the new layout code is :
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
@yield('style')
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
@guest
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
@if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
@endif
@else
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
@csrf
</form>
</div>
</li>
@endguest
</ul>
</div>
</div>
</nav>
<main class="py-4">
@yield('content')
</main>
</div>
@yield('script')
</body>
</html>Step - 9 : Create Blade file.
Into the last step, we need to create resources/views/products/index.blade.php file. for insert, update, delete and listing the product data.
@extends('layouts.app')
@section('style')
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
@endsection
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-12">
<div class="card">
<div class="card-header">
{{ __('Product Listing') }}
<button style="float: right; font-weight: 900;" class="btn btn-info btn-sm" type="button" data-toggle="modal" data-target="#CreateProductModal">
Create Product
</button>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered datatable">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Description</th>
<th>Price</th>
<th width="150" class="text-center">Action</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Create Product Modal -->
<div class="modal" id="CreateProductModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Product Create</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="alert alert-danger alert-dismissible fade show" role="alert" style="display: none;">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert alert-success alert-dismissible fade show" role="alert" style="display: none;">
<strong>Success!</strong>Product was added successfully.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="form-group">
<label for="Name">Name:</label>
<input type="text" class="form-control" name="name" id="name">
</div>
<div class="form-group">
<label for="Name">Price:</label>
<input type="text" class="form-control" name="price" id="price">
</div>
<div class="form-group">
<label for="Name">Description:</label>
<textarea class="form-control" name="description" id="description">
</textarea>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-success" id="SubmitCreateProductForm">Create</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Edit Product Modal -->
<div class="modal" id="EditProductModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Product Edit</h4>
<button type="button" class="close modelClose" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="alert alert-danger alert-dismissible fade show" role="alert" style="display: none;">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert alert-success alert-dismissible fade show" role="alert" style="display: none;">
<strong>Success!</strong>Product was added successfully.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div id="EditProductModalBody">
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-success" id="SubmitEditProductForm">Update</button>
<button type="button" class="btn btn-danger modelClose" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Delete Product Modal -->
<div class="modal" id="DeleteProductModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Product Delete</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<h4>Are you sure want to delete this product?</h4>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" id="SubmitDeleteProductForm">Yes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
@endsection
@section('script')
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
@endsectionNow, add the below jQuery code into the index.blade.php's @section('script')
<script type="text/javascript">
$(document).ready(function() {
// init datatable.
var dataTable = $('.datatable').DataTable({
processing: true,
serverSide: true,
autoWidth: false,
pageLength: 5,
// scrollX: true,
"order": [[ 0, "desc" ]],
ajax: '{{ route('get-products') }}',
columns: [
{data: 'id', name: 'id'},
{data: 'name', name: 'name'},
{data: 'description', name: 'description'},
{data: 'price', name: 'price'},
{data: 'Actions', name: 'Actions',orderable:false,serachable:false,sClass:'text-center'},
]
});
// Create product Ajax request.
$('#SubmitCreateProductForm').click(function(e) {
e.preventDefault();
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url: "{{ route('products.store') }}",
method: 'post',
data: {
name: $('#name').val(),
price: $('#price').val(),
description: $('#description').val(),
},
success: function(result) {
if(result.errors) {
$('.alert-danger').html('');
$.each(result.errors, function(key, value) {
$('.alert-danger').show();
$('.alert-danger').append('<strong><li>'+value+'</li></strong>');
});
} else {
$('.alert-danger').hide();
$('.alert-success').show();
$('.datatable').DataTable().ajax.reload();
setInterval(function(){
$('.alert-success').hide();
$('#CreateProductModal').modal('hide');
location.reload();
}, 2000);
}
}
});
});
// Get single product in EditModel
$('.modelClose').on('click', function(){
$('#EditProductModal').hide();
});
var id;
$('body').on('click', '#getEditProductData', function(e) {
e.preventDefault();
$('.alert-danger').html('');
$('.alert-danger').hide();
id = $(this).data('id');
$.ajax({
url: "products/"+id+"/edit",
method: 'GET',
// data: {
// id: id,
// },
success: function(result) {
console.log(result);
$('#EditProductModalBody').html(result.html);
$('#EditProductModal').show();
}
});
});
// Update product Ajax request.
$('#SubmitEditProductForm').click(function(e) {
e.preventDefault();
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url: "products/"+id,
method: 'PUT',
data: {
name: $('#editName').val(),
price: $('#editPrice').val(),
description: $('#editDescription').val(),
},
success: function(result) {
if(result.errors) {
$('.alert-danger').html('');
$.each(result.errors, function(key, value) {
$('.alert-danger').show();
$('.alert-danger').append('<strong><li>'+value+'</li></strong>');
});
} else {
$('.alert-danger').hide();
$('.alert-success').show();
$('.datatable').DataTable().ajax.reload();
setInterval(function(){
$('.alert-success').hide();
$('#EditProductModal').hide();
}, 2000);
}
}
});
});
// Delete product Ajax request.
var deleteID;
$('body').on('click', '#getDeleteId', function(){
deleteID = $(this).data('id');
})
$('#SubmitDeleteProductForm').click(function(e) {
e.preventDefault();
var id = deleteID;
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url: "products/"+id,
method: 'DELETE',
success: function(result) {
setInterval(function(){
$('.datatable').DataTable().ajax.reload();
$('#DeleteProductModal').hide();
}, 1000);
}
});
});
});
</script>After done this all steps then your Products Ajax CRUD is ready to run and test it is working fine or not? just run the below command in your project root directory for run the laravel application in a web browser.
php artisan serveThen open your web browser and hit the following URL in the browser.
http://localhost:8000/productsConclusion
As you can see, Ajax CRUS and bootstrap model validation are very easy to build the help of some jQuery code logic.
We hope these tutorials help everyone. if you have any issues or questions regarding this article. so, please comment below. Thanks.
Copyright 2023 HackTheStuff
