Ajax CRUD example in Laravel 5.5 application
In this post we will give you information about Ajax CRUD example in Laravel 5.5 application. Hear we will give you detail about Ajax CRUD example in Laravel 5.5 applicationAnd how to use it also give you demo for it if it is necessary.
Hello, everyone in this post we share with you how to make simple ajax crud in laravel application from the scratch. we all are love our application is running simple and fast without the loading page when we are make any action. so, you can done this in laravel using ajax.
In this post, we are sharing simple insert update delete and listing operation using ajax in laravel application but you can be done any type of operation and action with ajax. if you want your application run without page loading.
Just follow bellow step and done your laravel crud using ajax
Step : 1 Create Posts Table Migration
First, we are creating one new table migration to make crud operation on it like insert, update, delete or listing. so, we are here to create one posts table. create posts table migration using the following command.
php artisan make:migration create_posts_table
After running this command open posts table migration file and add the following . migration file create automatic in database/migrations/ this location.
use IlluminateSupportFacadesSchema;
use IlluminateDatabaseSchemaBlueprint;
use IlluminateDatabaseMigrationsMigration;
class CreatePostsTable extends Migration
{
public function up()
{
Schema::create('posts', function (Blueprint $table) {
$table->increments('id');
$table->string('title');
$table->text('details');
$table->timestamps();
});
}
public function down()
{
Schema::dropIfExists('posts');
}
}
Now, run the following command for run migration.
php artisan migrate
Step : 2 Create Posts Table Model
Next, create post table model using by the following command.
php artisan make:demo Post
Next, open app/Post.php file and past into it following .
namespace App;
use IlluminateDatabaseEloquentModel;
class Post extends Model
{
/**
* The attributes that are mass assignable.
*
* @var array
*/
protected $fillable = [
'title', 'details'
];
}
Step : 3 Create Routes
Next, create the following routes in routes/web.php file.
Route::get('my-posts', 'PostController@myPosts');
Route::resource('posts','PostController');
Look at in the above route here I’m using resources instead of the simple route. I hope you all are very well known why I’m use the resource route? because of we are use the resource route then we not need to create all separate routes like index, create, store, update, delete or show. if your use the resource route then they route automatically created.
Step : 4 Create Controller
Next, we need to create PostController.php file in app/Http/Controllers/ this path and put into it the following .
namespace AppHttpControllers;
use IlluminateHttpRequest;
use AppPost;
class PostController extends Controller
{
/**
* Display a listing of the resource.
*
* @return IlluminateHttpResponse
*/
public function myPosts()
{
return view('my-posts');
}
/**
* Display a listing of the resource.
*
* @return IlluminateHttpResponse
*/
public function index()
{
$posts = Post::latest()->paginate(5);
return response()->json($posts);
}
/**
* Store a newly created resource in storage.
*
* @param IlluminateHttpRequest $request
* @return IlluminateHttpResponse
*/
public function store(Request $request)
{
$post = Post::create($request->all());
return response()->json($post);
}
/**
* Update the specified resource in storage.
*
* @param IlluminateHttpRequest $request
* @param int $id
* @return IlluminateHttpResponse
*/
public function update(Request $request, $id)
{
$post = Post::find($id)->update($request->all());
return response()->json($post);
}
/**
* Remove the specified resource from storage.
*
* @param int $id
* @return IlluminateHttpResponse
*/
public function destroy($id)
{
Post::find($id)->delete();
return response()->json(['done']);
}
}
Step : 5 Create Blade/View File
Next, we will create my-posts.blade.php file in resources/views/ folder. and simply put into it following . here i’m using simple bootstrap layout but you can set accourding to you.
<!DOCTYPE html>
<html>
<head>
<title>Laravel 5.5 Ajax CRUD Example</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css">
</head>
<body>
<div >
<div >
<div >
<div >
<h2>Laravel 5.5 Ajax CRUD Example Demo</h2>
</div>
<div >
<button type="button" data-toggle="modal" data-target="#create-item">Create New Post</button>
</div>
</div>
</div>
<table >
<thead>
<tr>
<th>Title</th>
<th>Details</th>
<th width="200px">Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<ul id="pagination" ></ul>
<!-- Create Item Modal -->
@include('create')
<!-- Edit Item Modal -->
@include('edit')
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twbs-pagination/1.3.1/jquery.twbsPagination.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.5/validator.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
<script type="text/javascript">
var url = "<?php echo route('posts.index')?>";
</script>
<script src="/js/postsAjax.js"></script>
</body>
</html>
Step : 6 Create JS File
Next, we need to create postsAjax.js JS file in public/js/ path and put into it following .
var page = 1;
var current_page = 1;
var total_page = 0;
var is_ajax_fire = 0;
manageData();
/* manage data list */
function manageData() {
$.ajax({
dataType: 'json',
url: url,
data: {page:page}
}).done(function(data) {
total_page = data.last_page;
current_page = data.current_page;
$('#pagination').twbsPagination({
totalPages: total_page,
visiblePages: current_page,
onPageClick: function (event, pageL) {
page = pageL;
if(is_ajax_fire != 0){
getPageData();
}
}
});
manageRow(data.data);
is_ajax_fire = 1;
});
}
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
/* Get Page Data*/
function getPageData() {
$.ajax({
dataType: 'json',
url: url,
data: {page:page}
}).done(function(data) {
manageRow(data.data);
});
}
/* Add new Post table row */
function manageRow(data) {
var rows = '';
$.each( data, function( key, value ) {
rows = rows + '<tr>';
rows = rows + '<td>'+value.title+'</td>';
rows = rows + '<td>'+value.details+'</td>';
rows = rows + '<td data-id="'+value.id+'">';
rows = rows + '<button data-toggle="modal" data-target="#edit-item" >Edit</button> ';
rows = rows + '<button >Delete</button>';
rows = rows + '</td>';
rows = rows + '</tr>';
});
$("tbody").html(rows);
}
/* Create new Post */
$(".crud-submit").click(function(e) {
e.preventDefault();
var form_action = $("#create-item").find("form").attr("action");
var title = $("#create-item").find("input[name='title']").val();
var details = $("#create-item").find("pre[name='details']").val();
$.ajax({
dataType: 'json',
type:'POST',
url: form_action,
data:{title:title, details:details}
}).done(function(data){
getPageData();
$(".modal").modal('hide');
toastr.success('Post Created Successfully.', 'Success Alert', {timeOut: 5000});
});
});
/* Remove Post */
$("body").on("click",".remove-item",function() {
var id = $(this).parent("td").data('id');
var c_obj = $(this).parents("tr");
$.ajax({
dataType: 'json',
type:'delete',
url: url + '/' + id,
}).done(function(data) {
c_obj.remove();
toastr.success('Post Deleted Successfully.', 'Success Alert', {timeOut: 5000});
getPageData();
});
});
/* Edit Post */
$("body").on("click",".edit-item",function() {
var id = $(this).parent("td").data('id');
var title = $(this).parent("td").prev("td").prev("td").text();
var details = $(this).parent("td").prev("td").text();
$("#edit-item").find("input[name='title']").val(title);
$("#edit-item").find("pre[name='details']").val(details);
$("#edit-item").find("form").attr("action",url + '/' + id);
});
/* Updated new Post */
$(".crud-submit-edit").click(function(e) {
e.preventDefault();
var form_action = $("#edit-item").find("form").attr("action");
var title = $("#edit-item").find("input[name='title']").val();
var details = $("#edit-item").find("pre[name='details']").val();
$.ajax({
dataType: 'json',
type:'PUT',
url: form_action,
data:{title:title, details:details}
}).done(function(data){
getPageData();
$(".modal").modal('hide');
toastr.success('Post Updated Successfully.', 'Success Alert', {timeOut: 5000});
});
});
Now we are ready to run our example so run bellow command ro quick run:
php artisan serve
Now you can open bellow URL on your browser:
http://localhost:8000/my-posts
If you want to any problem then please write comment and also suggest for new topic for make tutorials in future. Thanks…
Hope this and post will helped you for implement Ajax CRUD example in Laravel 5.5 application. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and Keep reading our blogs