Today, We want to share with you Laravel 6.2 jQuery AJAX CRUD Tutorial.In this post we will show you Laravel 6.2 Ajax CRUD Tutorial For Beginners, hear for Laravel 6.2 Ajax CRUD (Operation) Application Example we will give you demo and example for implement.In this post, we will learn about Laravel 6.2 Ajax CRUD example for web application without page refresh with an example.
Laravel 6.2 jQuery AJAX CRUD Tutorial
Contents
There are the Following The simple About Laravel 6.2 Ajax CRUD with Pagination example and demo from scratch Full Information With Example and source code.
As I will cover this Post with live Working example to develop Laravel 6.2 Create First Ajax CRUD Application, so the Step by Step CRUD Operation in Laravel 6.2 with File Upload is used for this example is following below.
Phase 1 : Install Laravel 6.2 and Basic Configurations
Install Laravel 6.2 and Basic some IMP. Configurations
composer create-project --prefer-dist laravel/laravel adminpanel-api-project
Phase 2 : Laravel 6.2 Install Yajra Datatables
display all movies in datatable, weβll use the Laravel 6.2 Yajra Datatables package
composer require yajra/laravel-datatables-oracle
Phase 3 : Create Movie Model, Migration & Controller
create the movie model, migration and controller using Laravel 6.2
php artisan make:model Movie -mcr
database/migration/timestamp_create_movies_table.php
public function up()
{
Schema::create('movies', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('name');
$table->string('author');
$table->timestamps();
});
}
migrate the migration using Laravel 6.2
php artisan migrate
Laravel 6.2 : open Movie model and add a $fillable array
app/Movie.php
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Movie extends Model
{
protected $fillable = [
'name', 'author'
];
}
app\Http\Controllers\API\MovieController.php
<?php
namespace App\Http\Controllers;
use App\Movie;
use Illuminate\Http\Request;
use DataTables;
class MovieController extends Controller
{
public function index(Request $request)
{
$movies = Movie::latest()->get();
if ($request->ajax()) {
return Datatables::of($movies)
->addIndexColumn()
->addColumn('action', function ($row) {
$btn = 'Edit';
$btn = $btn . ' Delete';
return $btn;
})
->rawColumns(['action'])
->make(true);
}
return view('movies', compact('movies'));
}
public function store(Request $request)
{
Movie::updateOrCreate([
'id' => $request->movie_id
],[
'name' => $request->name,
'author' => $request->author
]);
// return response
$response = [
'success' => true,
'message' => 'Movie saved successfully.',
];
return response()->json($response, 200);
}
public function edit($id)
{
$movie = Movie::find($id);
return response()->json($movie);
}
public function destroy(Movie $movie)
{
$movie->delete();
// return response
$response = [
'success' => true,
'message' => 'Movie deleted successfully.',
];
return response()->json($response, 200);
}
}
Phase 4 : Laravel 6.2 Register Route
routes/web.php
Route::resource('movies','MovieController');
Phase 5 : Create Laravel 6.2 Blade File
resources/views/movies.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel 6.2 Ajax CRUD with DataTables Tutorial For Beginners - www.pakainfo.com</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<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.20/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<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>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
</head>
<body>
<div class="container">
<div class="text-center" style="margin: 20px 0px 20px 0px;">
<a href="https://beta.mynotepaper.com/" target="_blank" rel="noopener noreferrer"><img src="https://i.imgur.com/pakainfo.png"></a><br>
<span class="text-secondary">Laravel 6.2 Ajax CRUD with DataTables Tutorial For Beginners</span>
</div>
<div class="container-fluid">
<div class="row">
<h4 class="one">Movies</h4>
<button class="btn btn-info ml-auto" id="createNewMovie">Create Movie</button>
</div>
</div>
<br>
<h3>Laravel 6.2 Ajax CRUD with Pagination example and demo from scratch</h3>
<table id="dataTable" class="table table-striped table-bordered">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Author</th>
<th width="280px">Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
{{-- create/update movie modal--}}
<div class="modal fade" id="basic_ajax_model" 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="movieForm" name="movieForm" class="form-horizontal">
<input type="hidden" name="movie_id" id="movie_id">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-12">
<input type="text" class="form-control" id="name" name="name" placeholder="Enter name"
value="" maxlength="50" required="" autocomplete="off">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Author</label>
<div class="col-sm-12">
<input type="text" class="form-control" id="author" name="author"
placeholder="Enter author name"
value="" maxlength="50" required="" autocomplete="off">
</div>
</div>
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" id="saveBtn">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(function () {
//ajax setup
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
//Laravel 6.2 datatable
var table = $('#dataTable').DataTable({
processing: true,
serverSide: true,
ajax: "{{ url('movies') }}",
columns: [
{data: 'DT_RowIndex', name: 'DT_RowIndex'},
{data: 'name', name: 'name'},
{data: 'author', name: 'author'},
{data: 'action', name: 'action', orderable: false, searchable: false},
]
});
// create new movie
$('#createNewMovie').click(function () {
$('#saveBtn').html("Create");
$('#movie_id').val('');
$('#movieForm').trigger("reset");
$('#modelHeading').html("Create New Movie");
$('#basic_ajax_model').modal('show');
});
// create or update movie
$('#saveBtn').click(function (e) {
e.preventDefault();
$(this).html('Saving..');
$.ajax({
data: $('#movieForm').serialize(),
url: "{{ url('movies') }}",
type: "POST",
dataType: 'json',
success: function (data) {
$('#movieForm').trigger("reset");
$('#basic_ajax_model').modal('hide');
table.draw();
$('#saveBtn').html('Save');
},
error: function (data) {
console.log('Error:', data);
$('#saveBtn').html('Save');
}
});
});
// edit movie
$('body').on('click', '.editMovie', function () {
var movie_id = $(this).data('id');
$.get("{{ url('movies') }}" + '/' + movie_id + '/edit', function (data) {
$('#modelHeading').html("Edit Movie");
$('#saveBtn').html('Update');
$('#basic_ajax_model').modal('show');
$('#movie_id').val(data.id);
$('#name').val(data.name);
$('#author').val(data.author);
})
});
// delete movie
$('body').on('click', '.deleteMovie', function () {
var movie_id = $(this).data("id");
confirm("Are You sure want to delete !");
$.ajax({
type: "DELETE",
url: "{{ url('movies') }}" + '/' + movie_id,
success: function (data) {
table.draw();
},
error: function (data) {
console.log('Error:', data);
}
});
});
});
</script>
</html>
Web Programming Tutorials Example with Demo
Read :
Summary
You can also read about AngularJS, ASP.NET, VueJs, PHP.
I hope you get an idea about AJAX CRUD Tutorial Using jQuery, JSON and PHP Laravel 6.2.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, donβt forget to share.
I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I’m a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.