Laravel 5.7 Jquery Ajax CRUD(insert update delete) – Technology
In this post we will give you information about Laravel 5.7 Jquery Ajax CRUD(insert update delete) – Technology. Hear we will give you detail about Laravel 5.7 Jquery Ajax CRUD(insert update delete) – TechnologyAnd how to use it also give you demo for it if it is necessary.
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 IlluminateSupportFacadesSchema;
use IlluminateDatabaseSchemaBlueprint;
use IlluminateDatabaseMigrationsMigration;
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 IlluminateDatabaseEloquentModel;
class Article extends Model
{
/**
* The attributes that are mass assignable.
*
* @var array
*/
protected $fillable = [
'title', 'article_content'
];
}
Step : 3 Create Laravel Routes
List of all Google Adsense, VueJS, AngularJS, PHP, Laravel Examples.
Next, create following routes in routes/web.php file.
routes/web.php
Route::get('web-articles', '[email protected]');
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 AppHttpControllers;
use IlluminateHttpRequest;
use AppArticle;
class ArticleController extends Controller
{
/**
* Display a listing of the resource.
*
* @return IlluminateHttpResponse
*/
public function webArticles()
{
return view('web-articles');
}
/**
* Display a listing of the resource.
*
* @return IlluminateHttpResponse
*/
public function index()
{
$articles = Article::latest()->paginate(5);
return response()->json($articles);
}
/**
* Store a newly created resource in storage.
*
* @param IlluminateHttpRequest $request
* @return IlluminateHttpResponse
*/
public function store(Request $request)
{
$Article = Article::create($request->all());
return response()->json($Article);
}
/**
* Update the specified resource in storage.
*
* @param IlluminateHttpRequest $request
* @param int $id
* @return IlluminateHttpResponse
*/
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 IlluminateHttpResponse
*/
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
<!DOCTYPE html>
<html>
<head>
<title>Laravel 5.7 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.7 Ajax CRUD Example Demo</h2>
</div>
<div >
<button type="button" data-toggle="modal" data-target="#create-data-component">Create New Article</button>
</div>
</div>
</div>
<table >
<thead>
<tr>
<th>Title</th>
<th>article_content</th>
<th width="200px">Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<ul id="pagination" ></ul>
<!-- Create data-component Modal -->
@include('create')
<!-- Edit data-component 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('articles.index')?>";
</script>
<script src="/js/ArticlesAjax.js"></script>
</body>
</html>
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 + '<tr>';
data_lines = data_lines + '<td>'+value.title+'</td>';
data_lines = data_lines + '<td>'+value.article_content+'</td>';
data_lines = data_lines + '<td data-id="'+value.id+'">';
data_lines = data_lines + '<button data-toggle="modal" data-target="#edit-data-component" >Edit</button> ';
data_lines = data_lines + '<button >Delete</button>';
data_lines = data_lines + '</td>';
data_lines = data_lines + '</tr>';
});
$("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 :
- Technology
- Google Adsense
- Programming
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 onlinecode 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.
Hope this code and post will helped you for implement Laravel 5.7 Jquery Ajax CRUD(insert update delete) – Technology. 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 code Keep reading our blogs