Today, We want to share with you Laravel 5.7 Jquery Ajax CRUD(insert update delete).In this post we will show you Ajax CRUD example in Laravel 5.7 application, hear for Laravel 5.7 CRUD (Create Read Update Delete) Example from scratch we will give you demo and example for implement.In this post, we will learn about Laravel 5.7 CRUD Insert Update Delete using Jquery Ajax Tutorial example with source code with an example.
Laravel 5.7 Jquery Ajax CRUD(insert update delete)
There are the Following The simple About Laravel 5.7 Jquery Ajax CRUD(insert update delete) Full Information With Example and source code.
As I will cover this Post with live Working example to develop Laravel 5.7 CRUD (Create Read Update Delete) Tutorial Example, so the Simple Laravel 5.7 Jquery Ajax CRUD(insert update delete) tutorial example with source code for this example is following below.
Step : 1 Create articles Table Migration
Laravel Table Migration
php artisan make:migration create_Articles_table
After run this commandd open articles table mimgration file and add foollowing code. migration file create automatic in database/migrations/ this location.
database/migrations/
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateArticlesTable extends Migration
{
public function up()
{
Schema::create('articles', function (Blueprint $table) {
$table->increments('id');
$table->string('title');
$table->text('article_content');
$table->timestamps();
});
}
public function down()
{
Schema::dropIfExists('articles');
}
}
And then, Laravel CMD to run following command for run migration.
php artisan migrate
Step : 2 Create articles Table Model
After that, create Article table model usign by following command.
php artisan make:demo Article
And then, open app/Article.php file and past into it following source code.
app/Article.php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Article extends Model
{
/**
* The attributes that are mass assignable.
*
* @var array
*/
protected $fillable = [
'title', 'article_content'
];
}
Step : 3 Create Laravel Routes
Next, create following routes in routes/web.php file.
routes/web.php
Route::get('web-articles', 'ArticleController@webArticles');
Route::resource('articles','ArticleController');
Step : 4 Make Laravel 5.7 Controller
And then, we need to create ArticleController.php file in app/Http/Controllers/ this path and put into it following source code.
app/Http/Controllers/ArticleController.php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Article;
class ArticleController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function webArticles()
{
return view('web-articles');
}
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$articles = Article::latest()->paginate(5);
return response()->json($articles);
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$Article = Article::create($request->all());
return response()->json($Article);
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param int $id
* @return \Illuminate\Http\Response
*/
public function update(Request $request, $id)
{
$Article = Article::find($id)->update($request->all());
return response()->json($Article);
}
/**
* Remove the specified resource from storage.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
Article::find($id)->delete();
return response()->json(['done']);
}
}
Step : 5 Create Laravel Blade/View File
Now, we will make a web-articles.blade.php file in resources/views/ folder. and then simply put into it following source code. here We are using simple bootstrap layout but you can set accourding to you.
resources/views/web-articles.blade.php
Laravel 5.7 Ajax CRUD Example Laravel 5.7 Ajax CRUD Example Demo
Title article_content Action @include('create') @include('edit')
Step : 6 Create JS File
Next, we need to create ArticlesAjax.js JS file in public/js/ path and put into it following source code.
public/js/ArticlesAjax.js
var page = 1;
var active_page = 1;
var total_page = 0;
var ajax_data_call = 0;
manageData();
/* manage data list */
function manageData() {
$.ajax({
dataType: 'json',
url: url,
data: {page:page}
}).done(function(data) {
total_page = data.last_page;
active_page = data.active_page;
$('#pagination').twbsPagination({
totalPages: total_page,
visiblePages: active_page,
onPageClick: function (event, pageL) {
page = pageL;
if(ajax_data_call != 0){
fetchAllData();
}
}
});
handleDatalines(data.data);
ajax_data_call = 1;
});
}
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
/* Get Page Data*/
function fetchAllData() {
$.ajax({
dataType: 'json',
url: url,
data: {page:page}
}).done(function(data) {
handleDatalines(data.data);
});
}
/* Add new Article table row */
function handleDatalines(data) {
var data_lines = '';
$.each( data, function( key, value ) {
data_lines = data_lines + '';
data_lines = data_lines + ''+value.title+' ';
data_lines = data_lines + ''+value.article_content+' ';
data_lines = data_lines + '';
data_lines = data_lines + ' ';
data_lines = data_lines + '';
data_lines = data_lines + ' ';
data_lines = data_lines + ' ';
});
$("tbody").html(data_lines);
}
/* Create new Article */
$(".crud-submit").click(function(e) {
e.preventDefault();
var actions_crud = $("#create-data-component").find("form").attr("action");
var title = $("#create-data-component").find("input[name='title']").val();
var article_content = $("#create-data-component").find("textarea[name='article_content']").val();
$.ajax({
dataType: 'json',
type:'Article',
url: actions_crud,
data:{title:title, article_content:article_content}
}).done(function(data){
fetchAllData();
$(".modal").modal('hide');
toastr.success('Article Created Successfully.', 'Success Alert', {timeOut: 5000});
});
});
/* Remove Article */
$("body").on("click",".remove-data-component",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('Article Deleted Successfully.', 'Success Alert', {timeOut: 5000});
fetchAllData();
});
});
/* Edit Article */
$("body").on("click",".edit-data-component",function() {
var id = $(this).parent("td").data('id');
var title = $(this).parent("td").prev("td").prev("td").text();
var article_content = $(this).parent("td").prev("td").text();
$("#edit-data-component").find("input[name='title']").val(title);
$("#edit-data-component").find("textarea[name='article_content']").val(article_content);
$("#edit-data-component").find("form").attr("action",url + '/' + id);
});
/* Updated new Article */
$(".crud-submit-edit").click(function(e) {
e.preventDefault();
var actions_crud = $("#edit-data-component").find("form").attr("action");
var title = $("#edit-data-component").find("input[name='title']").val();
var article_content = $("#edit-data-component").find("textarea[name='article_content']").val();
$.ajax({
dataType: 'json',
type:'PUT',
url: actions_crud,
data:{title:title, article_content:article_content}
}).done(function(data){
fetchAllData();
$(".modal").modal('hide');
toastr.success('Article Updated Successfully.', 'Success Alert', {timeOut: 5000});
});
});
Last I am ready to Laravel Project run our example Therefor run bellow command ro quick run:
Laravel 5.7 run our example
php artisan serve
Finnally Step We can open bellow simple URL on your Browsers run:
http://localhost:8000/web-articles
Angular 6 CRUD Operations Application Tutorials
Read :
Summary
You can also read about AngularJS, ASP.NET, VueJs, PHP.
I hope you get an idea about Laravel 5.7 Jquery Ajax CRUD(insert update delete).
I would like to have feedback on my Pakainfo.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.