CRUD Tutorial Ajax jQuery with Pagination, In this tutorial I will give you how to Create Ajax Jquery CRUD (Create, Read, Update and Delete) complete with Pagenasi and Video, on this occasion I use your laravel 5.4.
In this tutorial I will give you how to Create Ajax Jquery CRUD (Create, Read, Update and Delete) complete with Pagenasi and Video, on this occasion I use your laravel 5.4.
After this command you will find one file in following path database/migrations and you have to put bellow code in your migration file for create Posts table.
Post Migration : database\migrations\create_posts_table
After create "Posts" table you should create post model for posts, so first create file in this path app/Post.php and put bellow content in post.php
Post model : app\post.php
Controlllers : app\http\controllers\PostController
Video Tutorial CRUD Ajax jQuery Example
Full Download Source Code : goo.gl/8hGbVKStep 1 : Laravel Installation
in this first step, if you have not installed laravel in your OS, so you have to install it by going to CMD (Your Favorite Terminal) type command below.composer create-project laravel/laravel AjaxCrudStep 2 : Create Post table and model
php artisan make:model Posts -m
After this command you will find one file in following path database/migrations and you have to put bellow code in your migration file for create Posts table.
Post Migration : database\migrations\create_posts_table
<?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->increments('id');
$table->string('title');
$table->text('body');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('posts');
}
}
After create "Posts" table you should create post model for posts, so first create file in this path app/Post.php and put bellow content in post.php
Post model : app\post.php
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
protected $table = 'posts';
}
Step 3: Add Route
Post route : routes\web.php
Route::group(['middleware' => ['web']], function() {
Route::resource('post','PostController');
Route::POST('addPost','PostController@addPost');
Route::POST('editPost','PostController@editPost');
Route::POST('deletePost','PostController@deletePost');
});
Step 4: Create a new Controllers
Run this command to Create a new Controllerphp artisan make:controller PostController
Controlllers : app\http\controllers\PostController
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Post;
use Validator;
use Response;
use Illuminate\Support\Facades\Input;
use App\http\Requests;
class PostController extends Controller
{
public function index(){
$post = Post::paginate(4);
return view('post.index',compact('post'));
}
public function addPost(Request $request){
$rules = array(
'title' => 'required',
'body' => 'required',
);
$validator = Validator::make ( Input::all(), $rules);
if ($validator->fails())
return Response::json(array('errors'=> $validator->getMessageBag()->toarray()));
else {
$post = new Post;
$post->title = $request->title;
$post->body = $request->body;
$post->save();
return response()->json($post);
}
}
public function editPost(request $request){
$post = Post::find ($request->id);
$post->title = $request->title;
$post->body = $request->body;
$post->save();
return response()->json($post);
}
public function deletePost(request $request){
$post = Post::find ($request->id)->delete();
return response()->json();
}
}
Step 5 : Create a new Blade File
View : resources\views\post\index.blade.php
{{-- calling layouts \ app.blade.php --}}
@extends('layouts.app')
@section('content')
<div class="row">
<div class="col-md-12">
<h1>Simple Laravel CRUD Ajax</h1>
</div>
</div>
<div class="row">
<div class="table table-responsive">
<table class="table table-bordered" id="table">
<tr>
<th width="150px">No</th>
<th>Title</th>
<th>Body</th>
<th>Create At</th>
<th class="text-center" width="150px">
<a href="#" class="create-modal btn btn-success btn-sm">
<i class="glyphicon glyphicon-plus"></i>
</a>
</th>
</tr>
{{ csrf_field() }}
<?php $no=1; ?>
@foreach ($post as $value)
<tr class="post{{$value->id}}">
<td>{{ $no++ }}</td>
<td>{{ $value->title }}</td>
<td>{{ $value->body }}</td>
<td>{{ $value->created_at }}</td>
<td>
<a href="#" class="show-modal btn btn-info btn-sm" data-id="{{$value->id}}" data-title="{{$value->title}}" data-body="{{$value->body}}">
<i class="fa fa-eye"></i>
</a>
<a href="#" class="edit-modal btn btn-warning btn-sm" data-id="{{$value->id}}" data-title="{{$value->title}}" data-body="{{$value->body}}">
<i class="glyphicon glyphicon-pencil"></i>
</a>
<a href="#" class="delete-modal btn btn-danger btn-sm" data-id="{{$value->id}}" data-title="{{$value->title}}" data-body="{{$value->body}}">
<i class="glyphicon glyphicon-trash"></i>
</a>
</td>
</tr>
@endforeach
</table>
</div>
{{$post->links()}}
</div>
{{-- Modal Form Create Post --}}
<div id="create" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group row add">
<label class="control-label col-sm-2" for="title">Title :</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="title" name="title"
placeholder="Your Title Here" required>
<p class="error text-center alert alert-danger hidden"></p>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="body">Body :</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="body" name="body"
placeholder="Your Body Here" required>
<p class="error text-center alert alert-danger hidden"></p>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-warning" type="submit" id="add">
<span class="glyphicon glyphicon-plus"></span>Save Post
</button>
<button class="btn btn-warning" type="button" data-dismiss="modal">
<span class="glyphicon glyphicon-remobe"></span>Close
</button>
</div>
</div>
</div>
</div></div>
{{-- Modal Form Show POST --}}
<div id="show" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="">ID :</label>
<b id="i"/>
</div>
<div class="form-group">
<label for="">Title :</label>
<b id="ti"/>
</div>
<div class="form-group">
<label for="">Body :</label>
<b id="by"/>
</div>
</div>
</div>
</div>
</div>
{{-- Modal Form Edit and Delete Post --}}
<div id="myModal"class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="modal">
<div class="form-group">
<label class="control-label col-sm-2"for="id">ID</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="fid" disabled>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2"for="title">Title</label>
<div class="col-sm-10">
<input type="name" class="form-control" id="t">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2"for="body">Body</label>
<div class="col-sm-10">
<textarea type="name" class="form-control" id="b"></textarea>
</div>
</div>
</form>
{{-- Form Delete Post --}}
<div class="deleteContent">
Are You sure want to delete <span class="title"></span>?
<span class="hidden id"></span>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn actionBtn" data-dismiss="modal">
<span id="footer_action_button" class="glyphicon"></span>
</button>
<button type="button" class="btn btn-warning" data-dismiss="modal">
<span class="glyphicon glyphicon"></span>close
</button>
</div>
</div>
</div>
</div>
@endsection
Step 6: Create JS and CSS File
View : resources\views\layouts\app.blade.php<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel Crud</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default navbar-ststic-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="{{route('post.index')}}">CodELog</a>
</div>
</div>
</nav>
<div class="container">
@yield('content')
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript">
{{-- ajax Form Add Post--}}
$(document).on('click','.create-modal', function() {
$('#create').modal('show');
$('.form-horizontal').show();
$('.modal-title').text('Add Post');
});
$("#add").click(function() {
$.ajax({
type: 'POST',
url: 'addPost',
data: {
'_token': $('input[name=_token]').val(),
'title': $('input[name=title]').val(),
'body': $('input[name=body]').val()
},
success: function(data){
if ((data.errors)) {
$('.error').removeClass('hidden');
$('.error').text(data.errors.title);
$('.error').text(data.errors.body);
} else {
$('.error').remove();
$('#table').append("<tr class='post" + data.id + "'>"+
"<td>" + data.id + "</td>"+
"<td>" + data.title + "</td>"+
"<td>" + data.body + "</td>"+
"<td>" + data.created_at + "</td>"+
"<td><button class='show-modal btn btn-info btn-sm' data-id='" + data.id + "' data-title='" + data.title + "' data-body='" + data.body + "'><span class='fa fa-eye'></span></button> <button class='edit-modal btn btn-warning btn-sm' data-id='" + data.id + "' data-title='" + data.title + "' data-body='" + data.body + "'><span class='glyphicon glyphicon-pencil'></span></button> <button class='delete-modal btn btn-danger btn-sm' data-id='" + data.id + "' data-title='" + data.title + "' data-body='" + data.body + "'><span class='glyphicon glyphicon-trash'></span></button></td>"+
"</tr>");
}
},
});
$('#title').val('');
$('#body').val('');
});
// function Edit POST
$(document).on('click', '.edit-modal', function() {
$('#footer_action_button').text(" Update Post");
$('#footer_action_button').addClass('glyphicon-check');
$('#footer_action_button').removeClass('glyphicon-trash');
$('.actionBtn').addClass('btn-success');
$('.actionBtn').removeClass('btn-danger');
$('.actionBtn').addClass('edit');
$('.modal-title').text('Post Edit');
$('.deleteContent').hide();
$('.form-horizontal').show();
$('#fid').val($(this).data('id'));
$('#t').val($(this).data('title'));
$('#b').val($(this).data('body'));
$('#myModal').modal('show');
});
$('.modal-footer').on('click', '.edit', function() {
$.ajax({
type: 'POST',
url: 'editPost',
data: {
'_token': $('input[name=_token]').val(),
'id': $("#fid").val(),
'title': $('#t').val(),
'body': $('#b').val()
},
success: function(data) {
$('.post' + data.id).replaceWith(" "+
"<tr class='post" + data.id + "'>"+
"<td>" + data.id + "</td>"+
"<td>" + data.title + "</td>"+
"<td>" + data.body + "</td>"+
"<td>" + data.created_at + "</td>"+
"<td><button class='show-modal btn btn-info btn-sm' data-id='" + data.id + "' data-title='" + data.title + "' data-body='" + data.body + "'><span class='fa fa-eye'></span></button> <button class='edit-modal btn btn-warning btn-sm' data-id='" + data.id + "' data-title='" + data.title + "' data-body='" + data.body + "'><span class='glyphicon glyphicon-pencil'></span></button> <button class='delete-modal btn btn-danger btn-sm' data-id='" + data.id + "' data-title='" + data.title + "' data-body='" + data.body + "'><span class='glyphicon glyphicon-trash'></span></button></td>"+
"</tr>");
}
});
});
// form Delete function
$(document).on('click', '.delete-modal', function() {
$('#footer_action_button').text(" Delete");
$('#footer_action_button').removeClass('glyphicon-check');
$('#footer_action_button').addClass('glyphicon-trash');
$('.actionBtn').removeClass('btn-success');
$('.actionBtn').addClass('btn-danger');
$('.actionBtn').addClass('delete');
$('.modal-title').text('Delete Post');
$('.id').text($(this).data('id'));
$('.deleteContent').show();
$('.form-horizontal').hide();
$('.title').html($(this).data('title'));
$('#myModal').modal('show');
});
$('.modal-footer').on('click', '.delete', function(){
$.ajax({
type: 'POST',
url: 'deletePost',
data: {
'_token': $('input[name=_token]').val(),
'id': $('.id').text()
},
success: function(data){
$('.post' + $('.id').text()).remove();
}
});
});
// Show function
$(document).on('click', '.show-modal', function() {
$('#show').modal('show');
$('#i').text($(this).data('id'));
$('#ti').text($(this).data('title'));
$('#by').text($(this).data('body'));
$('.modal-title').text('Show Post');
});
</script>
</body>
</html>
COMMENTS