Today I will show you how to create ajax crud operations in laravel. In laravel 6/7 ajax crud operation, we can perform without page refresh. for laravel 6/7 ajax crud operation the creation of an ajax example, we will use different CDN of bootstrap for designing purposes. and also we will use the data table CDN.
So, let's see laravel 6/7 AJAX CRUD example, AJAX CRUD example in laravel 6/7, laravel 6 AJAX CRUD without refresh, CRUD operation in laravel 7 using AJAX, how to save data in database using AJAX in laravel 7, CRUD operation using AJAX jquery.
Follow CRUD operation using AJAX step by step in laravel 6.
Step 1: Install Laravel
Type the following command in the terminal.
composer create-project --prefer-dist laravel/laravel blog
Step 2: Database Setup
In the second step, we will configure the database for the example database name, username, password, etc for our AJAX crud example of laravel. So open the .env file and fill in all details like as below:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database name(blog)
DB_USERNAME=database username(root)
DB_PASSWORD=database password(NULL)
Step 3: Add/Create Migration Table
We are creating an AJAX crud example for posts. So first, we have to create migration for the "posts" table using Laravel php artisan command, so the first type below command:
php artisan make:migration create_posts_table --create=posts
After running this command you will find php file here location "database/migrations/" in this file you need to add the below code.
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreatePostsTable extends Migration {
/**
* Run the migrations.
*
* @return void */
public function up()
{
Schema::create('posts', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('title')->nullable();
$table->longText('description')->nullable();
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('posts');
}
}
after this we need to run this migration by following command in our terminal:
php artisan migrate
Step 4: Add Resource Route
Now Add the Resource route in Routes/web.php
Route::resource('ajaxposts','PostAjaxController');
Step 5: Add Controller and Model
create the PostAjaxController using the following command.
php artisan make:controller PostAjaxController --resource --model=Post
Now make changes in Model, you will find a model in this path App/Post.php add the below code in post.php
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
protected $fillable = [
'id', 'title', 'description'
];
}
After changes in the model you will find PostAjaxController.php in this path app/Http/Controllers/PostAjaxController.php:
So, Copy code in your postajaxcontroller
<?php
namespace App\Http\Controllers;
use App\Post;
use Illuminate\Http\Request;
use DataTables;
class PostAjaxController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index(Request $request)
{
if ($request->ajax()) {
$post = Post::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 editPost">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 deletePost">Delete</a>';
return $btn;
})
->rawColumns(['action'])
->make(true);
}
return view('postAjax',compact('post'));
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
Post::updateOrCreate(['id' => $request->id],
['title' => $request->title, 'description' => $request->description]);
return response()->json(['success'=>'Post saved successfully.']);
}
/**
* Show the form for editing the specified resource.
*
* @param \App\Post
* @return \Illuminate\Http\Response
*/
public function edit($id)
{
$post = Post::find($id);
return response()->json($post);
}
/**
* Remove the specified resource from storage.
*
* @param \App\Post
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
Post::find($id)->delete();
return response()->json(['success'=>'Post deleted successfully.']);
}
}
Now make changes in Model, you will find a model in this folder App/Post.php add the below code in post.php
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
protected $fillable = [
'id', 'title', 'description'
];
}
Step 6: Add Blade Files
In this step we will create only one blade file for this example, So create postAjax.blade.php in this path resources/views/postAjax.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel Ajax CRUD example - www.websolutionstuff.com</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<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>
<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">
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div class="container">
<h1>Laravel Ajax CRUD example - www.websolutionstuff.com</h1>
<a class="btn btn-info" href="javascript:void(0)" id="createNewPost"> Add New Post</a>
<table class="table table-bordered data-table">
<thead>
<tr>
<th>No</th>
<th>Title</th>
<th>Description</th>
<th width="280px">Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="modal fade" id="ajaxModelexa" 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="postForm" name="postForm" class="form-horizontal">
<input type="hidden" name="id" id="id">
<div class="form-group">
<label for="title" class="col-sm-2 control-label">Title</label>
<div class="col-sm-12">
<input type="text" class="form-control" id="title" name="title" placeholder="Enter Name" value="" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Description</label>
<div class="col-sm-12">
<textarea id="description" name="description" required placeholder="Enter Description" class="form-control"></textarea>
</div>
</div>
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" id="savedata" value="create">Save Post
</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('ajaxposts.index') }}",
columns: [
{data: 'DT_RowIndex', name: 'DT_RowIndex'},
{data: 'title', name: 'title'},
{data: 'description', name: 'description'},
{data: 'action', name: 'action', orderable: false, searchable: false},
]
});
$('#createNewPost').click(function () {
$('#savedata').val("create-post");
$('#id').val('');
$('#postForm').trigger("reset");
$('#modelHeading').html("Create New Post");
$('#ajaxModelexa').modal('show');
});
$('body').on('click', '.editPost', function () {
var id = $(this).data('id');
$.get("{{ route('ajaxposts.index') }}" +'/' + id +'/edit', function (data) {
$('#modelHeading').html("Edit Post");
$('#savedata').val("edit-user");
$('#ajaxModelexa').modal('show');
$('#id').val(data.id);
$('#title').val(data.title);
$('#description').val(data.description);
})
});
$('#savedata').click(function (e) {
e.preventDefault();
$(this).html('Sending..');
$.ajax({
data: $('#postForm').serialize(),
url: "{{ route('ajaxposts.store') }}",
type: "POST",
dataType: 'json',
success: function (data) {
$('#postForm').trigger("reset");
$('#ajaxModelexa').modal('hide');
table.draw();
},
error: function (data) {
console.log('Error:', data);
$('#savedata').html('Save Changes');
}
});
});
$('body').on('click', '.deletePost', function () {
var id = $(this).data("id");
confirm("Are You sure want to delete this Post!");
$.ajax({
type: "DELETE",
url: "{{ route('ajaxposts.store') }}"+'/'+id,
success: function (data) {
table.draw();
},
error: function (data) {
console.log('Error:', data);
}
});
});
});
</script>
</html>
Now, We are all completed our code, so it's time to run this project...
So, Copy the below command and run it in the terminal.
php artisan serve
and finally, you can run this project on your browser.
You might also like:
In this article, we will see how to generate barcode using javascript. We will use a javascript plugin to generate...
Nov-01-2022
In this example we will see how to convert html to pdf using javaScript. PDF file format is very useful to dow...
Aug-23-2021
Laravel is a comprehensive framework that provides an extensive range of artisan commands, enabling the automation of di...
Oct-06-2023
In this article, we will discuss laravel 8 authentication with jetstream. This post will give you a simpl...
Nov-12-2020