Laravel AJAX CRUD Example Tutorial
Hello Guys,
Today I will show you how to create laravel AJAX CRUD example tutorial. In this tutorial we are implements ajax crud operation in laravel. Also perform insert, update, delete operation using ajax in laravel 6 and also you can use this ajax crud operation in laravel 6, laravel 7. In ajax crud operation we display records in datatable.
So, let's start and follow below steps.
Step 1 : Install Laravel
Step 2 : Database Setup
Step 3 : Create Migration Table
Step 4 : Add Resource Route
Step 5 : Add Controller and Model
Step 6 : Add Blade Files
Type the following command in terminal.
composer create-project --prefer-dist laravel/laravel blog
In second step, we will configure database for example database name, username, password etc for our AJAX crud example of laravel. So open .env file and fill all details like as bellow:
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)
We are creating AJAX crud example for post. So first, we have to create migration for "posts" table using Laravel php artisan command, so first type below command:
php artisan make:migration create_posts_table --create=posts
After run this command you will find php file here location "database/migrations/" in this file you need to add 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
Now Add Resource route in Routes/web.php
Route::resource('ajaxposts','PostAjaxController');
create the PostAjaxController using the following command.
php artisan make:controller PostAjaxController --resource --model=Post
Now make changes in Model , you will find model in this path App/Post.php add 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 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 model in this folder App/Post.php add below code in post.php
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
protected $fillable = [
'id', 'title', 'description'
];
}
In this step we will create only one blade file for thia example, So create postAjax.blade.php in this path resources/views/postAjax.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel AJAX CRUD Example Tutorial - www.techsolutionstuff.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 Tutorial - www.techsolutionstuff.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 all completed with our code So, it's time to run this project....
So Copy below command and run in terminal.
php artisan serve
and finally you can run this project on your browser.
