Today, We want to share with you Laravel Vue JS CRUD Example Tutorial From Scratch.In this post we will show you Vue.js Laravel CRUD Example Tutorial From Scratch, hear for Creating a simple CRUD application with Laravel 5 and Vue.js we will give you demo and example for implement.In this post, we will learn about Laravel 5.7 and Vue JS CRUD with Pagination example and demo with an example.
Laravel Vue JS CRUD Example Tutorial From Scratch
There are the Following The simple About Laravel Vue JS CRUD Example Tutorial From Scratch Full Information With Example and source code.
As I will cover this Post with live Working example to develop Laravel 5.5 – VueJS 2.0 CRUD Operations, so the some major files and We Need Server Requirements for this example is following below.
- Apache/Nginx
- CMD To install Composer
- Mbstring PHP Extension
- Databse for MySQl
- simple Teminal NodeJs with NPM
- OpenSSL PHP Extension
- PDO PHP Extension
- Latest Version Of the PHP >= 7.0.0
- Tokenizer PHP Extension
- XML PHP Extension
Step : 1 Make Laravel Latest Version Install Project:
Install Laravel Project
composer create-project --prefer-dist laravel/laravel Atmiya25
Step : 2 Settings .env
reate laravel project open Set .env file and setting your database connection setting
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=Atmiya25 DB_USERNAME=root DB_PASSWORD=
Step : 3 Build Mobile Table Migration
run following CMD To command and build migration file
php artisan make:migration create_mobile_table --create=mobiles
migration/database
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateMobileTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('mobiles', function (Blueprint $table) {
$table->increments('id');
$table->string('title');
$table->text('mobileinformation');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('mobiles');
}
}
and then Run this command
php artisan migrate
Step : 4 Make Mobile Table Laravel Model And Controller:
Make Mobile table model and controller build this command
php artisan make:model Mobile -r
app/Mobile.php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Mobile extends Model
{
protected $fillable = [
'title',
'mobileinformation',
];
}
app/Http/Controllers/MobileController.php
namespace App\Http\Controllers;
use App\Mobile;
use Illuminate\Http\Request;
class MobileController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$mobiles = Mobile::get();
return response()->json([
'mobiles' => $mobiles,
], 200);
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$this->validate($request, [
'title' => 'required|max:255',
'mobileinformation' => 'required',
]);
$mobile = Mobile::create([
'title' => request('title'),
'mobileinformation' => request('mobileinformation'),
]);
return response()->json([
'mobile' => $mobile,
'message' => 'Success'
], 200);
}
/**
* Display the specified resource.
*
* @param \App\Mobile $mobile
* @return \Illuminate\Http\Response
*/
public function show(Mobile $mobile)
{
//
}
/**
* Show the form for editing the specified resource.
*
* @param \App\Mobile $mobile
* @return \Illuminate\Http\Response
*/
public function edit(Mobile $mobile)
{
//
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param \App\Mobile $mobile
* @return \Illuminate\Http\Response
*/
public function update(Request $request, Mobile $mobile)
{
$this->validate($request, [
'title' => 'required|max:255',
'mobileinformation' => 'required',
]);
$mobile->title = request('title');
$mobile->mobileinformation = request('mobileinformation');
$mobile->save();
return response()->json([
'message' => 'Mobile updated successfully!'
], 200);
}
/**
* Remove the specified resource from storage.
*
* @param \App\Mobile $mobile
* @return \Illuminate\Http\Response
*/
public function destroy(Mobile $mobile)
{
//
}
}
Step : 5 Make Laravel Mobile Route:
resource Route (web.php)
Route::resource('/mobiles', 'MobileController');
Step : 6 Simple Register Vue Component:
/resources/assets/js/app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example', require('./components/Example.vue'));
Vue.component('mobiles', require('./components/Mobile.vue'));
const app = new Vue({
el: '#app'
});
/resources/views/home.blade.php
@extends('layouts.app')
@section('content')
@endsection
Step : 7 Make Simple VueJS Component:
component file in /resources/assets/js/components/Mobile.vue
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">My Mobile</div>
<div class="panel-body">
<h2>Laravel Vue JS CRUD Example Tutorial From Scratch</h2>
</div>
</div>
</div>
</div>
</div>
<b>Laravel Vue JS CRUD Example Tutorial From Scratch Step By step</b>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<button class="btn btn-success btn-xs pull-right">
+ Add New Mobile
</button>
My Mobile
</div>
<div class="panel-body">
<table class="table table-bordered table-striped table-responsive"> 0">
<tbody>
<tr>
<th>
No.
</th>
<th>
Title
</th>
<th>
Information
</th>
<th>
Action
</th>
</tr>
<tr>
<td>{{ index + 1 }}</td>
<td>
{{ mobiles.title }}
</td>
<td>
{{ mobiles.mobileinformation }}
</td>
<td>
<button class="btn btn-success btn-xs">Edit</button>
<button class="btn btn-danger btn-xs">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="modal fade" role="dialog" id="add_mobile_model">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"><span>×</span></button>
<h4 class="modal-title">Add New Mobile</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger"> 0">
<ul>
<li>{{ error }}</li>
</ul>
</div>
<div class="form-group">
<label for="title">Title:</label>
</div>
<div class="form-group">
<label for="mobileinformation">Information:</label>
<textarea name="mobileinformation" id="mobileinformation" cols="30" rows="5" class="form-control"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default">Close</button>
<button type="button" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
<div class="modal fade" role="dialog" id="update_mobile_model">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"><span>×</span></button>
<h4 class="modal-title">Update Mobile</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger"> 0">
<ul>
<li>{{ error }}</li>
</ul>
</div>
<div class="form-group">
<label>Title:</label>
</div>
<div class="form-group">
<label for="mobileinformation">Information:</label>
<textarea cols="30" rows="5" class="form-control"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success">Close</button>
<button type="button" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
</div>
export default {
data(){
return {
mobiles: {
title: '',
mobileinformation: ''
},
errors: [],
mobiles: [],
update_mobile: {}
}
},
mounted()
{
this.readMobiles();
},
methods: {
initAddMobile()
{
this.errors = [];
$("#add_mobile_model").modal("show");
},
createMobile()
{
axios.mobile('/mobiles', {
title: this.mobiles.title,
mobileinformation: this.mobiles.mobileinformation,
})
.then(response => {
this.reset();
$("#add_mobile_model").modal("hide");
})
.catch(error => {
this.errors = [];
if (error.response.data.errors.title) {
this.errors.push(error.response.data.errors.title[0]);
}
if (error.response.data.errors.mobileinformation) {
this.errors.push(error.response.data.errors.mobileinformation[0]);
}
});
},
reset()
{
this.mobiles.title = '';
this.mobiles.mobileinformation = '';
},
readMobiles()
{
axios.get('/mobiles')
.then(response => {
this.mobiles = response.data.mobiles;
});
},
initUpdate(index)
{
this.errors = [];
$("#update_mobile_model").modal("show");
this.update_mobile = this.mobiles[index];
},
updateMobile()
{
axios.patch('/mobiles/' + this.update_mobile.id, {
title: this.update_mobile.title,
mobileinformation: this.update_mobile.mobileinformation,
})
.then(response => {
$("#update_mobile_model").modal("hide");
})
.catch(error => {
this.errors = [];
if (error.response.data.errors.title) {
this.errors.push(error.response.data.errors.title[0]);
}
if (error.response.data.errors.mobileinformation) {
this.errors.push(error.response.data.errors.mobileinformation[0]);
}
});
},
deleteMobile(index)
{
let conf = confirm("Do you ready want to delete this mobile?");
if (conf === true) {
axios.delete('/mobiles/' + this.mobiles[index].id)
.then(response => {
this.mobiles.splice(index, 1);
})
.catch(error => {
});
}
}
}
}
Step : 8 Run Laravel 5.5 – VueJS 2.0 CRUD Operations:
Simple Laravel 5.5 – VueJS 2.0 CRUD Operations Project Run
//Install NPM npm install //run Project npm run dev php artisan serve //Run URL in Browsers http://localhost:8000/
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 Vue JS CRUD Example Tutorial From Scratch.
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.