Laravel Redirect To Another URL / Web Page - HTTP Laravel Redirects

Laravel 5.7 Jquery Ajax CRUD(insert update delete)

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.

  WooCommerce Get Product Downloads

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', '[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 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

<!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 class="container">
    <div class="row">
        <div class="col-lg-12 margin-tb">
            <div class="pull-left">
                <h2>Laravel 5.7 Ajax CRUD Example Demo</h2>
            </div>
            <div class="pull-right">
        <button type="button" class="btn btn-success" data-toggle="modal" data-target="#create-data-component">Create New Article</button>
            </div>
        </div>
    </div>
    <table class="table table-bordered">
      <thead>
          <tr>
        <th>Title</th>
        <th>article_content</th>
        <th width="200px">Action</th>
          </tr>
      </thead>
      <tbody>
      </tbody>
    </table>

    <ul id="pagination" class="pagination-sm"></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.

  Javascript Progress Bar percentage Example

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" class="btn btn-primary edit-data-component">Edit</button> ';
        data_lines = data_lines + '<button class="btn btn-danger remove-data-component">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:

  updated_option Wordpress hook details - WORDPRESS ACTION HOOKS

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.