Vuejs and Laravel insert update delete with Pagination Component

Rate this post

Vuejs and Laravel insert update delete with Pagination Component

In this Post We Will Explain About is Vuejs and Laravel insert update delete with Pagination Component With Example and Demo.

Welcome on infinityknow.com – Examples ,The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Laravel 5 Ajax CRUD with Pagination example and demo from scratch

In this post we will show you Best way to implement Laravel Jquery Ajax Pagination Example From Scratch, hear for How to Laravel 5 and Vue JS CRUD with Pagination example and demo from scratch with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Step 1: Laravel Installation

[php]
composer create-project –prefer-dist laravel/laravel live24u
[/php]

Step 2: Create products table and model

[php]
php artisan make:migration create_products_table
[/php]

After this simple command we will find more or one file in following simple laravel path Like as a database/migrations and we have to simple put bellow source code in your created migration file for new create products table.

READ :  Vuejs Date Range Picker start date end date Component

[php]
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateItemsTable extends Migration
{

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

public function down()
{
Schema::drop(“products”);
}
}
[/php]
app/product.php
[php]
namespace App;

use Illuminate\Database\Eloquent\Model;

class product extends Model
{

public $fillable = [‘title’,’comments’];

}
[/php]

Step 3: Add Route and Controller

app/Http/routes.php
[php]
Route::get(‘manage-vue’, ‘[email protected]’);
Route::resource(‘vueproducts’,’VueProductController’);
[/php]

app/Http/Controllers/VueProductController.php

[php]
namespace App\Http\Controllers;

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

class VueProductController extends Controller
{

public function manageVue()
{
return view(‘manage-vue’);
}

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

$results_data = [
‘custom_pagination’ => [
‘total’ => $products->total(),
‘rec_perpage’ => $products->perPage(),
‘this_page’ => $products->currentPage(),
‘last_cusom_page’ => $products->lastPage(),
‘from’ => $products->firstItem(),
‘to’ => $products->lastItem()
],
‘data’ => $products
];

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

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

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

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

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

$edit = product::find($id)->update($request->all());

return results_data()->json($edit);
}

public function destroy($id)
{
product::find($id)->delete();
return results_data()->json([‘done’]);
}
}
[/php]

READ :  jQuery Ajax Live Editable Table Records using PHP MySQLi

Step 4: Create Blade File

resources/views/manage-vue.blade.php
[php]

Simple Laravel with Vue JS product CRUD

Laravel with Vue JS product CRUD

Title Description Action
@{{ product.title }} @{{ product.comments }}



http://jquery.min.js
http://bootstrap.min.js
http://toastr.min.js

http://vue.min.js
http://vue-resource.min.js
/js/product.js

[/php]

Step 5: Create JS File

public/js/product.js
[php]
Vue.http.headers.common[‘X-CSRF-TOKEN’] = $(“#token”).attr(“value”);

new Vue({

el: ‘#manage-vue’,

data: {
products: [],
custom_pagination: {
total: 0,
rec_perpage: 2,
from: 1,
to: 0,
this_page: 1
},
offset: 4,
formErrors:{},
live_form_array:{},
cnewproducts : {‘title’:”,’comments’:”},
pro_item : {‘title’:”,’comments’:”,’id’:”}
},

computed: {
isActived: function () {
return this.custom_pagination.this_page;
},
pagesNumber: function () {
if (!this.custom_pagination.to) {
return [];
}
var from = this.custom_pagination.this_page – this.offset;
if (from = this.custom_pagination.last_cusom_page) {
to = this.custom_pagination.last_cusom_page;
}
var vue_pagesarr = [];
while (from {
this.$set(‘products’, results_data.data.data.data);
this.$set(‘custom_pagination’, results_data.data.custom_pagination);
});
},

createProduct: function(){
var input = this.cnewproducts;
this.$http.post(‘/vueproducts’,input).then((results_data) => {
this.changePage(this.custom_pagination.this_page);
this.cnewproducts = {‘title’:”,’comments’:”};
$(“#create-product”).modal(‘hide’);
toastr.success(‘product Created Successfully.’, ‘Success Alert’, {timeOut: 5000});
}, (results_data) => {
this.formErrors = results_data.data;
});
},

remove_item: function(product){
this.$http.delete(‘/vueproducts/’+product.id).then((results_data) => {
this.changePage(this.custom_pagination.this_page);
toastr.success(‘product Deleted Successfully.’, ‘Success Alert’, {timeOut: 5000});
});
},

live_edit: function(product){
this.pro_item.title = product.title;
this.pro_item.id = product.id;
this.pro_item.comments = product.comments;
$(“#edit-product”).modal(‘show’);
},

custm_liveupdate: function(id){
var input = this.pro_item;
this.$http.put(‘/vueproducts/’+id,input).then((results_data) => {
this.changePage(this.custom_pagination.this_page);
this.pro_item = {‘title’:”,’comments’:”,’id’:”};
$(“#edit-product”).modal(‘hide’);
toastr.success(‘product Updated Successfully.’, ‘Success Alert’, {timeOut: 5000});
}, (results_data) => {
this.live_form_array = results_data.data;
});
},

changePage: function (custom_page) {
this.custom_pagination.this_page = custom_page;
this.getVueProducts(custom_page);
}

}

});
[/php]

Example

I hope you have Got Laravel 5 and Vue JS CRUD with Pagination example and demo from scratch And how it works.I would Like to have FeadBack From My Blog(infinityknow.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(infinityknow.com) Are Most Always Welcome.

Leave a Reply

Your email address will not be published.