Laravel Vue.js CRUD Example 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/

• This blog post was originally published at: https://www.pakainfo.com

#vue  #vuejs