Laravel 5.6 and VueJS CRUD with Search and Pagination Example

Laravel 5.6 and VueJS CRUD with Search and Pagination Example

In this Post We Will Explain About is Laravel 5.6 and VueJS CRUD with Search and Pagination Example With Example and Demo.Welcome on Live24u.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to simple CRUD application with Laravel 5.6 and Vue.js 2 Example

In this post we will show you Best way to implement Laravel 5.6 VueJS CRUD Operations Application, hear for vue.js Create ajax CRUD, search, sort and pagination with Laravel 5.6 Example with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.




We can step by step Learning Insert Update delete web application from Full Source code, Therefor no worry if We can Learning through bellow simple step. And then make successful example, We will find HTML View layout as bellow source code:

Step 1: Laravel Installation

here first of all, If you have not Latest version installed Laravel in your PHP Based system and then you have to execute CMt bellow Laravel command and fetch Latest Laravel web application project.

composer create-project --prefer-dist laravel/laravel blog

Step 2: Create products table and model

In this Phase I have to make Laravel Database migration for products table using Laravel fresh version 5 php artisan Laravel command, Therefor first of all run simple bellow Laravel command:

php artisan make:migration create_products_table

ow this Laravel command you will search one simple file in following this Laravel path Like as database/migrations then you have to insert bellow some source code in your Laravel database migration file for made products table.

Also Read :   Angularjs routeprovider pass parameters to controller Example

use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

//Laravel 5.6 VueJS CRUD Operations Application
class CreateItemsTable extends Migration
{


    public function up()
    {
        Schema::create('products', function (Blueprint $table) {
            $table->increments('id');
            $table->string('title');
            $table->text('productDesc');
            $table->timestamps();
        });
    }


    public function down()
    {
        Schema::drop("products");
    }
}

And then Make “products” table you need to Make Product model for products, Therefor first Make file in this path Like as a app/Product.php and Insert some bellow data content in product.php file:app/Product.php

namespace App;
//Laravel 5.6 VueJS CRUD Operations Application
use Illuminate\Database\Eloquent\Model;
class Product extends Model
{
    public $fillable = ['title','productDesc'];
}

Step 3: Add Route and Controller

app/Http/routes.php

//vue.js Create ajax CRUD, search, sort and pagination with Laravel 5.6 Example
Route::get('liveApp-vue', 'LiveVueProductController@liveappVue');
Route::resource('vueproducts','LiveVueProductController');

app/Http/Controllers/LiveVueProductController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Product;

class LiveVueProductController extends Controller
{
    public function liveappVue()
    {
        return view('liveApp-vue');
    }

    public function index(Request $request)
    {
        $products = Product::latest()->paginate(5);


        $dataRes = [
            'pagination' => [
                'total' => $products->total(),
                'per_page' => $products->perPage(),
                'active_page' => $products->currentPage(),
                'end_page' => $products->lastPage(),
                'from' => $products->firstItem(),
                'to' => $products->lastItem()
            ],
            'data' => $products
        ];


        return dataRes()->json($dataRes);
    }

    public function store(Request $request)
    {
        $this->validate($request, [
            'title' => 'required',
            'productDesc' => 'required',
        ]);


        $create = Product::create($request->all());


        return dataRes()->json($create);
    }

    public function update(Request $request, $id)
    {
        $this->validate($request, [
            'title' => 'required',
            'productDesc' => 'required',
        ]);


        $edit = Product::find($id)->update($request->all());
        return dataRes()->json($edit);
    }

    public function destroy($id)
    {
        Product::find($id)->delete();
        return dataRes()->json(['done']);
    }
}

Step 4: Make Blade File

resources/views/liveApp-vue.blade.php

<!DOCTYPE html>
<html>
<head>
<title>Simple Laravel 5.6 Vue JS Product CRUD</title>
<meta id="token" name="token" value="{{ csrf_token() }}">
<link rel="stylesheet" type="text/css" href="live24u/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css">
</head>
<body>


<div class="live24u container" id="liveApp-vue">


<div class="live24u row">
    <div class="live24u col-lg-12 margin-tb">
        <div class="live24u pull-left">
            <h2>Simple Laravel 5.6 Vue JS Product CRUD</h2>
        </div>
        <div class="live24u pull-right">
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#make-product">
  Create Product
</button>
        </div>
    </div>
</div>


<!--live24u Product Listing -->
<table class="live24u table table-bordered">
<tr>
<th>Title</th>
<th>ProductDesc.</th>
<th width="200px">Action</th>
</tr>
<tr v-for="product in products">
<td>@{{ product.title }}</td>
<td>@{{ product.productDesc }}</td>
<td>
      <button class="btn btn-success" @click.prevent="productEdit(product)">Edit</button>
      <button class="btn btn-danger" @click.prevent="productDelete(product)">Delete</button>
</td>
</tr>
</table>


<!--live24u Pagination -->
<nav>
        <ul class="live24u pagination">
            <li v-if="pagination.active_page > 1">
                <a href="#" aria-label="Previous"
                   @click.prevent="pageModeChange(pagination.active_page - 1)">
                    <span aria-hidden="true">«</span>
                </a>
            </li>
            <li v-for="page in totalNumberPages"
                v-bind:class="[ page == isActived ? 'active' : '']">
                <a href="#"
                   @click.prevent="pageModeChange(page)">@{{ page }}</a>
            </li>
            <li v-if="pagination.active_page < pagination.end_page">
                <a href="#" aria-label="Next"
                   @click.prevent="pageModeChange(pagination.active_page + 1)">
                    <span aria-hidden="true">»</span>
                </a>
            </li>
        </ul>
    </nav>


    <!-- Create Product Modal -->
<div class="live24u modal fade" id="make-product" tabindex="-1" role="dialog" aria-labelledby="liveModelLbl">
  <div class="live24u modal-dialog" role="document">
    <div class="live24u modal-content">
      <div class="live24u modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="live24u modal-title" id="liveModelLbl">Create Product</h4>
      </div>
      <div class="live24u modal-body">


      <form method="POST" enctype="multipart/form-data" v-on:submit.prevent="makeProduct">


      <div class="lst form-group gst">
<label for="title">Title:</label>
<input type="text" name="title" class="gst form-control live" v-model="productNew.title" />
<span v-if="livefrmErr['title']" class="error text-danger">@{{ livefrmErr['title'] }}</span>
</div>


<div class="lst form-group gst">
<label for="title">ProductDesc.:</label>
<textarea name="productDesc" class="gst form-control live" v-model="productNew.productDesc"></textarea>
<span v-if="livefrmErr['productDesc']" class="error text-danger">@{{ livefrmErr['productDesc'] }}</span>
</div>


<div class="lst form-group gst">
<button type="submit" class="live24u btn btn-success">Submit</button>
</div>
      </form>        
      </div>
    </div>
  </div>
</div>


<!--live24u Edit Product Modal -->
<div class="live24u modal fade" id="edit-product" tabindex="-1" role="dialog" aria-labelledby="live24u liveModelLbl">
  <div class="live24u modal-dialog" role="document">
    <div class="live24u modal-content">
      <div class="live24u modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="liveModelLbl">Edit Product</h4>
      </div>
      <div class="modal-body">


      <form method="POST" enctype="multipart/form-data" v-on:submit.prevent="productUpdate(productFill.id)">


      <div class="lst form-group gst">
<label for="title">Title:</label>
<input type="text" name="title" class="gst form-control live" v-model="productFill.title" />
<span v-if="livefrmErrUpdate['title']" class="error text-danger">@{{ livefrmErrUpdate['title'] }}</span>
</div>


<div class="lst form-group gst">
<label for="title">ProductDesc.:</label>
<textarea name="productDesc" class="gst form-control live" v-model="productFill.productDesc"></textarea>
<span v-if="livefrmErrUpdate['productDesc']" class="error text-danger">@{{ livefrmErrUpdate['productDesc'] }}</span>
</div>


<div class="lst form-group gst">
<button type="submit" class="btn btn-success">Submit</button>
</div>
      </form>
      </div>
    </div>
  </div>
</div>
</div>

<script type="text/javascript" src="live24u/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="live24u/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>

<script type="text/javascript" src="live24utoastr.js/latest/js/toastr.min.js"></script>
<link href="live24ulibs/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
<script type="text/javascript" src="live24u/ajax/libs/vue/1.0.26/vue.min.js"></script>
<script type="text/javascript" src="live24u/vue.resource/0.9.3/vue-resource.min.js"></script>


<script type="text/javascript" src="live24u/js/product.js"></script>


</body>
</html>

Step 5: Make JS File

public/js/product.js

Also Read :   VueJS Encode and Decode URL example

//Laravel 5.6 and Vue JS CRUD with Pagination example and demo from scratch
Vue.http.headers.common['X-CSRF-TOKEN'] = $("#token").attr("value");
new Vue({
  el: '#liveApp-vue',
  data: {
    products: [],
    pagination: {
        total: 0, 
        per_page: 2,
        lstfrom: 1, 
        to: 0,
        active_page: 1
      },
    offset: 4,
    livefrmErr:{},
    livefrmErrUpdate:{},
    productNew : {'title':'','productDesc':''},
    productFill : {'title':'','productDesc':'','id':''}
  },
  computed: {
        isActived: function () {
            return this.pagination.active_page;
        },
        totalNumberPages: function () {
            if (!this.pagination.to) {
                return [];
            }
            var lstfrom = this.pagination.active_page - this.offset;
            if (lstfrom < 1) {
                lstfrom = 1;
            }
            var to = lstfrom + (this.offset * 2);
            if (to >= this.pagination.end_page) {
                to = this.pagination.end_page;
            }
            var pagesArray = [];
            while (lstfrom <= to) {
                pagesArray.push(lstfrom);
                lstfrom++;
            }
            return pagesArray;
        }
    },
  ready : function(){
  this.fetchVueProducts(this.pagination.active_page);
  },

  methods : {
        fetchVueProducts: function(page){
          this.$http.get('/vueproducts?page='+page).then((dataRes) => {
            this.$set('products', dataRes.data.data.data);
            this.$set('pagination', dataRes.data.pagination);
          });
        },
        makeProduct: function(){
  var input = this.productNew;
  this.$http.post('/vueproducts',input).then((dataRes) => {
    this.pageModeChange(this.pagination.active_page);
this.productNew = {'title':'','productDesc':''};
$("#make-product").modal('hide');
toastr.success('Product Created Successfully.', 'Success Alert', {timeOut: 5000});
  }, (dataRes) => {
this.livefrmErr = dataRes.data;
    });
},
      productDelete: function(product){
        this.$http.delete('/vueproducts/'+product.id).then((dataRes) => {
            this.pageModeChange(this.pagination.active_page);
            toastr.success('Product Deleted Successfully.', 'Success Alert', {timeOut: 5000});
        });
      },
      productEdit: function(product){
          this.productFill.title = product.title;
          this.productFill.id = product.id;
          this.productFill.productDesc = product.productDesc;
          $("#edit-product").modal('show');
      },
      productUpdate: function(id){
        var input = this.productFill;
        this.$http.put('/vueproducts/'+id,input).then((dataRes) => {
            this.pageModeChange(this.pagination.active_page);
            this.productFill = {'title':'','productDesc':'','id':''};
            $("#edit-product").modal('hide');
            toastr.success('Product Updated Successfully.', 'Success Alert', {timeOut: 5000});
          }, (dataRes) => {
              this.livefrmErrUpdate = dataRes.data;
          });
      },
      pageModeChange: function (page) {
          this.pagination.active_page = page;
          this.fetchVueProducts(page);
      }
  }
});

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example

Also Read :   AngularJS Form Validation Example





Example

I hope you have Got What is Laravel 5.6 VueJS CRUD Operations Application And how it works.I would Like to have FeedBack From My Blog(live24u.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(live24u.com) Are Most Always Welcome.