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.

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.

    Leave a Comment