Home » Laravel Vue JS CRUD Example Tutorial From Scratch

Laravel Vue JS CRUD Example Tutorial From Scratch

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 :

Read Also:  Toggle Switch Button in VueJs Example

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.


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  Laravel 5.8 Multiple Images Upload
  2. Read Also:  vuejs crud Insert Update Delete operations Example and demo
  3. Read Also:  PHP Laravel Get current User Information
  4. Read Also:  Laravel 5.8 Datatables Server Side Processing
  5. Read Also:  Vue IF Else Conditional Statement
  6. Read Also:  Handling Active Navigation Menu in Laravel Example
  7. Read Also:  delete image from folder in php and MySQL Database
  8. Read Also:  vue Select Box binding Example
  9. Read Also:  vue Check box binding Example
  10. Read Also:  Multiple Image Upload using PHP into MYSQL database

Leave a Comment

Your email address will not be published. Required fields are marked *