Category Archives: Blog

Blog

Laravel 7 Vue JS File Upload Example

In this Laravel 7 Vue JS File Upload Example tutorial, I’ll show you how to upload file using Vue Js in laravel. In this tutorial you will learn to create file upload functionality using Vue Js in laravel.

Laravel 7 Vue JS File Upload Example

Step 1: Download Laravel Fresh App
Step 2: Add Database Detail
Step 3: Create Model And Migration
Step 4: NPM Configuration
Step 5: Add Routes
Step 6: Create Controller By Command
Step 7: Create Vue Component
Step 8: Register Vue App
Step 9: Run Development Server

Step 1: Download Laravel Fresh App

First of all we need to create a fresh laravel project, download and install Laravel using the below command

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

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

Step 2: Add Database Details

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=here your database name here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Step 3: Create Model And Migration

Now, in this step we will create model and migration file for form. Please run the following command:

php artisan make:model Photo -m

1	php artisan make:model Photo -m

This command will create one model name photo.php and also create one migration file for the photos table.

Now open create_photos_table.php migration file from database>migrations and replace up() function with following code:

<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreatePhotosTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('photos', function (Blueprint $table) {
            $table->increments('id');
            $table->string('title');
            $table->timestamps();
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('photos');
    }
}

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreatePhotosTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

Schema::create('photos', function (Blueprint $table) {

$table->increments('id');

$table->string('title');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('photos');

}

Now, run the migration to create database table using following artisan command:

php artisan migrate

1	php artisan migrate

Step 4: NPM Configuration

php artisan preset vue

1	php artisan preset vue

Install all Vue dependencies:

npm install

1	npm install

Step 5: Add Routes

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

Route::get('upload_file', function () {
    return view('upload');
});
Route::post('store_file', 'FileUploadController@fileStore');

Route::get('upload_file', function () {

return view('upload');

});

Route::post('store_file', 'FileUploadController@fileStore');

Step 6: Create Controller By Command

Now, lets create a controller named FileUploadController using command given below –

php artisan make:controller FileUploadController

1	php artisan make:controller FileUploadController

After that, go to app\Http\Controllers and open FileUploadController.php file. Then update the following code into your FileUploadController.php file:

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
Use App\Photo;
class FileUploadController extends Controller
{
    // function to store file in 'upload' folder
    public function fileStore(Request $request)
    {
        $upload_path = public_path('upload');
        $file_name = $request->file->getClientOriginalName();
        $generated_new_name = time() . '.' . $request->file->getClientOriginalExtension();
        $request->file->move($upload_path, $generated_new_name);
         
        $insert['title'] = $file_name;
        $check = Photo::insertGetId($insert);
        return response()->json(['success' => 'You have successfully uploaded "' . $file_name . '"']);
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

Use App\Photo;

class FileUploadController extends Controller

{

// function to store file in 'upload' folder

public function fileStore(Request $request)

{

$upload_path = public_path('upload');

$file_name = $request->file->getClientOriginalName();

$generated_new_name = time() . '.' . $request->file->getClientOriginalExtension();

$request->file->move($upload_path, $generated_new_name);

$insert['title'] = $file_name;

$check = Photo::insertGetId($insert);

return response()->json(['success' => 'You have successfully uploaded "' . $file_name . '"']);

}

Step 7: Create Vue Component

Next step, go to resources/assets/js/components folder and create a filed called FileUpload.vue.

And update the following code into your FileUpload.vue components file:

<template>
<div class="container" style="margin-top: 50px;">
<div class="text-center">
<h4>File Upload with VueJS and Laravel</h4><br>
<div style="max-width: 500px; margin: 0 auto;">
<div v-if="success !== ''" class="alert alert-success" role="alert">
{{success}}
</div>
<form @submit="submitForm" enctype="multipart/form-data">
<div class="input-group">
<div class="custom-file">
<input type="file" name="filename" class="custom-file-input" id="inputFileUpload"
v-on:change="onFileChange">
<label class="custom-file-label" for="inputFileUpload">Choose file</label>
</div>
<div class="input-group-append">
<input type="submit" class="btn btn-primary" value="Upload">
</div>
</div>
<br>
<p class="text-danger font-weight-bold">{{filename}}</p>
</form>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component successfully mounted.')
},
data() {
return {
filename: '',
file: '',
success: ''
};
},
methods: {
onFileChange(e) {
//console.log(e.target.files[0]);
this.filename = "Selected File: " + e.target.files[0].name;
this.file = e.target.files[0];
},
submitForm(e) {
e.preventDefault();
let currentObj = this;
const config = {
headers: {
'content-type': 'multipart/form-data',
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
}
}
// form data
let formData = new FormData();
formData.append('file', this.file);
// send upload request
axios.post('/store_file', formData, config)
.then(function (response) {
currentObj.success = response.data.success;
currentObj.filename = "";
})
.catch(function (error) {
currentObj.output = error;
});
}
}
}
</script>

<h4>File Upload with VueJS and Laravel</h4><br>

</div>

<input type="file" name="filename" class="custom-file-input" id="inputFileUpload"

v-on:change="onFileChange">

<label class="custom-file-label" for="inputFileUpload">Choose file</label>

</div>

</div>

<br>

<p class="text-danger font-weight-bold">{{filename}}</p>

</form>

</div>

</template>

export default {

mounted() {

console.log('Component successfully mounted.')

data() {

return {

filename: '',

file: '',

success: ''

};

methods: {

onFileChange(e) {

//console.log(e.target.files[0]);

this.filename = "Selected File: " + e.target.files[0].name;

this.file = e.target.files[0];

submitForm(e) {

e.preventDefault();

let currentObj = this;

const config = {

headers: {

'content-type': 'multipart/form-data',

'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,

}

// form data

let formData = new FormData();

formData.append('file', this.file);

// send upload request

axios.post('/store_file', formData, config)

.then(function (response) {

currentObj.success = response.data.success;

currentObj.filename = "";

})

.catch(function (error) {

currentObj.output = error;

});

}

</script>

Now open resources/assets/js/app.js and include the FileUpload.vue component like this:app.js

require('./bootstrap');
window.Vue = require('vue');
Vue.component('file-upload-component', require('./components/FileUpload.vue').default);
const app = new Vue({
el: '#app',
});

require('./bootstrap');

window.Vue = require('vue');

Vue.component('file-upload-component', require('./components/FileUpload.vue').default);

const app = new Vue({

el: '#app',

});

Step 8: Register Vue App

In this step, we will create a blade view file to define Vue’s app. Go to resources/views folder and make a file named upload.blade.php. Then update the following code into upload.blade.php as follow:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<title>File Upload with VueJS and Laravel - w3adda.com</title>
<link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app">
<file-upload-component></file-upload-component>
</div>
<script src="{{asset('js/app.js')}}"></script>
</body>
</html>

<!doctype html>

<head>

<title>File Upload with VueJS and Laravel - w3adda.com</title>

</head>

<body>

<file-upload-component></file-upload-component>

</div>

</body>

</html>

Step 9: Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

npm run dev
or 
npm run watch

npm run dev

npm run watch

Laravel 7 Vue Dependent Dropdown Example

In this Laravel 7 Vue Dependent Dropdown Example tutorial, I’ll show you how to create dependent dropdown with Vue Js in laravel. In this tutorial you will learn to implement dependent dropdown with Vue Js in laravel. In this tutorial we will be creating simple country dependent dropdown to demonstrate dependent dropdown example in laravel.

Step 1: Download Laravel Fresh App
Step 2: Add Database Detail
Step 3: Create Migration Files
Step 4: Create Models
Step 5: NPM Configuration
Step 6: Add Routes
Step 7: Create Controller By Command
Step 8: Create Vue Component
Step 9: Initialize Vue Components
Step 10: Run Development Server

Step 1: Download Laravel Fresh App

First of all we need to create a fresh laravel project, download and install Laravel using the below command

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

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

Step 2: Add Database Details

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=here your database name here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Step 3: Create Migration Files

Now, in this step we will create model and migration file for form. Please run the following command:

php artisan make:migration create_countries_states_table

1	php artisan make:migration create_countries_states_table

Now open create_countries_states_table.php migration file from database>migrations and replace up() function with the following code:

<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateCountriesStatesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('countries', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('name');
            $table->timestamps();
        });
        Schema::create('states', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->integer('country_id');
            $table->string('name');
            $table->timestamps();
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('countries');
        Schema::dropIfExists('states');
    }
}

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreateCountriesStatesTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

Schema::create('countries', function (Blueprint $table) {

$table->bigIncrements('id');

$table->string('name');

$table->timestamps();

});

Schema::create('states', function (Blueprint $table) {

$table->bigIncrements('id');

$table->integer('country_id');

$table->string('name');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('countries');

Schema::dropIfExists('states');

}

Now, run the migration to create database table using following artisan command:

php artisan migrate

1	php artisan migrate

Step 4: Create Models

Now, in this step we will create model file. Please run the following command:

php artisan make:model Country
php artisan make:model State

1 2	php artisan make:model Country php artisan make:model State

Step 5: NPM Configuration

Install all Vue dependencies:

npm install

1	npm install

To calling Laravel API routes. You need to install vue-axios. So use run the following command on command prompt:

npm install vue-axios --save

1	npm install vue-axios --save

After installing all dependencies run this command:

npm run watch

1	npm run watch

Step 6: Add Routes

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

Route::get('get_countries', 'CountryStateController@getCountries');
Route::get('get_states', 'CountryStateController@getStates');

1 2	Route::get('get_countries', 'CountryStateController@getCountries'); Route::get('get_states', 'CountryStateController@getStates');

Step 7: Create Controller By Command

Now, lets create a controller named CountryStateController using command given below –

php artisan make:controller CountryStateController

1	php artisan make:controller CountryStateController

After that, go to app\Http\Controllers and open CountryStateController.php file. Then update the following code into your CountryStateController.php file:

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Country;
use App\State;
class CountryStateController extends Controller
{
    /**
     * Retrieve countries data
     *
     * @return void
     */
    public function getCountries()
    {
        $data = Country::get();
        return response()->json($data);
    }
    /**
     * Retrieve states data
     *
     */
    public function getStates(Request $request)
    {
        $data = State::where('country_id', $request->country_id)->get();
        return response()->json($data);
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Country;

use App\State;

class CountryStateController extends Controller

{

/**

* Retrieve countries data

* @return void

public function getCountries()

{

$data = Country::get();

return response()->json($data);

}

/**

* Retrieve states data

public function getStates(Request $request)

{

$data = State::where('country_id', $request->country_id)->get();

return response()->json($data);

}

Step 8: Create Vue Component

Next step, go to resources/assets/js/components folder and create a filed called DropdownComponent.vue. And update the following code into your DropdownComponent.vue. components file:

<template>
    <div class="container">
        <div class="text-center" style="margin: 20px 0px 20px 0px;">
            <span class="text-secondary">Dependent Dropdown with Laravel and VueJS</span>
        </div>
        <div class="row justify-content-center" style="margin: 20px 0px 20px 0px;">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-body">
                        <div class="form-group">
                            <label>Select Country:</label>
                            <select class='form-control' v-model='country' @change='getStates()'>
                                <option value='0' >Select Country</option>
                                <option v-for='data in countries' :value='data.id'>{{ data.name }}</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Select State:</label>
                            <select class='form-control' v-model='state'>
                                <option value='0' >Select State</option>
                                <option v-for='data in states' :value='data.id'>{{ data.name }}</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                country: 0,
                countries: [],
                state: 0,
                states: []
            }
        },
        methods:{
            getCountries: function(){
                axios.get('/get_countries')
                    .then(function (response) {
                        this.countries = response.data;
                    }.bind(this));
            },
            getStates: function() {
                axios.get('/get_states',{
                    params: {
                        country_id: this.country
                    }
                }).then(function(response){
                    this.states = response.data;
                }.bind(this));
            }
        },
        created: function(){
            this.getCountries()
        }
    }
</script>

<span class="text-secondary">Dependent Dropdown with Laravel and VueJS</span>

</div>

<label>Select Country:</label>

<option value='0' >Select Country</option>

</select>

</div>

<label>Select State:</label>

<option value='0' >Select State</option>

</select>

</div>

</template>

export default {

data(){

return {

country: 0,

countries: [],

state: 0,

states: []

}

methods:{

getCountries: function(){

axios.get('/get_countries')

.then(function (response) {

this.countries = response.data;

}.bind(this));

getStates: function() {

axios.get('/get_states',{

params: {

country_id: this.country

}

}).then(function(response){

this.states = response.data;

}.bind(this));

}

created: function(){

this.getCountries()

}

</script>

Now open resources/assets/js/app.js and include the FileUpload.vue component like this:app.js

require('./bootstrap');
window.Vue = require('vue');
Vue.component('dropdown-component', require('./components/DropdownComponent.vue').default);
const app = new Vue({
    el: '#app',
});

require('./bootstrap');

window.Vue = require('vue');

Vue.component('dropdown-component', require('./components/DropdownComponent.vue').default);

const app = new Vue({

el: '#app',

});

Step 9: Initialize Vue Components

In this step, navigate to resources/views and create one folder named layouts. Inside this folder create one blade view file named app.blade.php file.

Next, Navigate to resources/views/layouts and open app.blade.php file. Then update the following code into your app.blade.php file as follow:

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" value="{{ csrf_token() }}"/>
    <title>Dependent Dropdown with Laravel and VueJS - w3adda.com</title>
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">
    <link href="{{ mix('css/app.css') }}" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="app">
    <dropdown-component></dropdown-component>
</div>
<script src="{{ mix('js/app.js') }}" type="text/javascript"></script>
</body>
</html>

<!doctype html>

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>

<title>Dependent Dropdown with Laravel and VueJS - w3adda.com</title>

</head>

<body>

<dropdown-component></dropdown-component>

</div>

</body>

</html>

Step 10: Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

npm run dev
or
npm run watch

npm run dev

npm run watch

Laravel 7 Restrict IP Address From Accessing Website

In this Laravel 7 Restrict IP Address From Accessing Website tutorial, I’ll show you how to restrict an IP address from accessing the website in laravel. In this tutorial you will learn to restrict user to access website using IP Address in laravel. With this you will be able to restrict user with specified IP address from accessing the website, In this step by step tutorial we will be creating a middleware to restrict user with IP Address in laravel.

Laravel 7 Restrict IP Address From Accessing Website

Download Laravel Setup
Configure .env file
Create a Middleware
Register the Middleware

Step 1: Download Laravel Setup

First of all we need to create a fresh laravel project, download and install Laravel using the below command

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

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

Step 2: Configure .env file

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql 
 DB_HOST=127.0.0.1 
 DB_PORT=3306 
 DB_DATABASE=here your database name here
 DB_USERNAME=here database username here
 DB_PASSWORD=here database password here

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Step 3: Create a Middleware

Next step, Run the following artisan command to create a middleware named class BlockIpMiddleware:

php artisan make:middleware BlockIpMiddleware

1	php artisan make:middleware BlockIpMiddleware

Now, Go to app/Http/Middleware folder and open BlockIpMiddleware.php file. Then put the following code in BlockIpMiddleware.php file:

<?php
namespace App\Http\Middleware;
use Closure;
class BlockIpMiddleware
{
    // set IP addresses
    public $blockIps = ['ip-addr-1', 'ip-addr-2', '127.0.0.1'];
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        if (in_array($request->ip(), $this->blockIps)) {
            return response()->json(['message' => "You don't have permission to access this website."]);
        }
        return $next($request);
    }
}

<?php

namespace App\Http\Middleware;

use Closure;

class BlockIpMiddleware

{

// set IP addresses

public $blockIps = ['ip-addr-1', 'ip-addr-2', '127.0.0.1'];

/**

* Handle an incoming request.

* @param \Illuminate\Http\Request $request

* @param \Closure $next

* @return mixed

public function handle($request, Closure $next)

{

if (in_array($request->ip(), $this->blockIps)) {

return response()->json(['message' => "You don't have permission to access this website."]);

}

return $next($request);

}

Step 4: Register the Middleware

Now, we need to register the middleware, so go to app/Http/ and open Kernel.php file. And register middleware as follow:

protected $middlewareGroups = [
    'web' => [
        //--------------
        \App\Http\Middleware\BlockIpMiddleware::class,
    ],
    'api' => [
        //--------------
    ],
];

protected $middlewareGroups = [

'web' => [

//--------------

\App\Http\Middleware\BlockIpMiddleware::class,

'api' => [

//--------------

];

Laravel 7 Vue JS Flash Message Example

In this Laravel 7 Vue JS Flash Message Example Tutorial I’ll show you how to create Flash Message with Vue Js in laravel. In this tutorial you will learn to add Flash Message with Vue Js in laravel.

Laravel 7 Vue JS Flash Message Example

Step 1: Download Laravel Fresh App
Step 2: Add Database Detail
Step 3: Create Model And Migration
Step 4: NPM Configuration
Step 5: Add Routes
Step 6: Create Controller By Command
Step 7: Create Vue Component
Step 8: Register Vue App
Step 9: Run Development Server

Step 1: Download Laravel Fresh App

First of all we need to create a fresh laravel project, download and install Laravel using the below command

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

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

Step 2: Add Database Details

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=here your database name here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Step 3: Create Model And Migration

Now, in this step we will create model and migration file for form. Please run the following command:

php artisan make:model Post -m

1	php artisan make:model Post -m

This command will create one model name post.php and also create one migration file for the posts table. Now open create_postss_table.php migration file from database>migrations and replace up() function with following code:

<?php
 
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
 
class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->increments('id');
            $table->string('title');
            $table->text('description');
            $table->timestamps();
        });
    }
 
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreatePostsTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

Schema::create('posts', function (Blueprint $table) {

$table->increments('id');

$table->string('title');

$table->text('description');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('posts');

}

Now, run the migration to create database table using following artisan command:

php artisan migrate

1	php artisan migrate

Step 4: NPM Configuration

php artisan preset vue

1	php artisan preset vue

Install all Vue dependencies:

npm install

1	npm install

Step 5: Add Routes

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

Route::get('post', function () {
    return view('post');
});
Route::post('store', 'PostController@store');

Route::get('post', function () {

return view('post');

});

Route::post('store', 'PostController@store');

Step 6: Create Controller By Command

Now, lets create a controller named PostController using command given below –

php artisan make:controller PostController

1	php artisan make:controller PostController

After that, go to app\Http\Controllers and open PostController.php file. Then update the following code into your PostController.php file:

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
Use App\Post;
 
class PostController extends Controller
 
{
    
    public function store(Request $request)
    {
        $insert['title'] = $request->get('title');
        $insert['description'] = $request->get('description');
        $check = Post::insertGetId($insert);
 
        return response()->json($check);
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

Use App\Post;

class PostController extends Controller

{

public function store(Request $request)

{

$insert['title'] = $request->get('title');

$insert['description'] = $request->get('description');

$check = Post::insertGetId($insert);

return response()->json($check);

}

Step 7: Create Vue Component

Next step, go to resources/assets/js/components folder and create a file called Post.vue.

And update the following code into your Post.vue components file:

<template> 
    <div class="container"> 
        <div class="row justify-content-center"> 
   
            <div class="col-md-8"> 
                <div class="card"> 
                    <div class="card-header"> Laravel Vue js Flash Message Example </div> 
     
                    <div class="card-body"> 
                        <form @submit="formStore"> 
                        <strong> Title:</strong> 
                        <input type="text" class="form-control" v-model="title"> 
                        <strong> Description:</strong> 
                        <textarea class="form-control" v-model="description"> </textarea> 
    
                        <button class="btn btn-success"> Submit</button> 
                        </form> 
                        <strong> Output:</strong> 
                        <pre> 
                        {{output}}
                        </pre> 
                    </div> 
                </div> 
            </div> 
        </div> 
    </div> 
</template> 
    
<script> 
    export default {
        mounted() {
            console.log('Component mounted.')
        },
        data() {
            return {
              title: '',
              description: '',
              output: ''
            };
        },
        methods: {
            formStore(e) {
                e.preventDefault();
                let currentObj = this;
                axios.post('/store', {
                    title: this.title,
                    description: this.description
                })
                .then(function (response) {
                    currentObj.output = response.data;
                    flash('Post Created Successfully', 'success');
                })
                .catch(function (error) {
                    currentObj.output = error;
                });
            }
        }
    }
</script>

<div class="card-header"> Laravel Vue js Flash Message Example </div>

<strong> Title:</strong>

<strong> Description:</strong>

<button class="btn btn-success"> Submit</button>

</form>

<strong> Output:</strong>

<pre>

</pre>

</div>

</template>

export default {

mounted() {

console.log('Component mounted.')

data() {

return {

title: '',

description: '',

output: ''

};

methods: {

formStore(e) {

e.preventDefault();

let currentObj = this;

axios.post('/store', {

title: this.title,

description: this.description

})

.then(function (response) {

currentObj.output = response.data;

flash('Post Created Successfully', 'success');

})

.catch(function (error) {

currentObj.output = error;

});

}

</script>

Next, create a new components named flash.vue and update the following code into flash.vue file:

<template>
    <div class="alert alert-success spacing" role="alert" v-show="show">
        {{ body }}
    </div>
</template>
    
<script>
    export default {
        props: ['message'],
        data() {
            return {
                show : false,
                body : ''
            }
        },
        created() {
            if(this.message) {
                this.flash(this.message)
            }
            window.events.$on('flash',(message) => this.flash(message))
        },
        methods: {
            flash(message) {
                this.show = true
                this.body = message
   
                setTimeout(() => {
                    this.hide()
                },3000)
            },
            hide() {
                this.show = false
            }
        }
    }
</script>
    
<style>
    .spacing {
        position: fixed;
        right: 25px;
        bottom: 25px;
    }
</style>

</div>

</template>

export default {

props: ['message'],

data() {

return {

show : false,

body : ''

}

created() {

if(this.message) {

this.flash(this.message)

}

window.events.$on('flash',(message) => this.flash(message))

methods: {

flash(message) {

this.show = true

this.body = message

setTimeout(() => {

this.hide()

},3000)

hide() {

this.show = false

}

</script>

<style>

.spacing {

position: fixed;

right: 25px;

bottom: 25px;

}

</style>

Now open resources/assets/js/app.js and include the Post.vue and Flash.vue component as follow:

require('./bootstrap');
   
window.Vue = require('vue');
   
window.events = new Vue();
   
window.flash = function(message) {
    window.events.$emit('flash',message);
}
    
Vue.component('post-component', require('./components/Post.vue'));
Vue.component('flash', require('./components/Flash.vue'));
    
const app = new Vue({
    el: '#app'
});

require('./bootstrap');

window.Vue = require('vue');

window.events = new Vue();

window.flash = function(message) {

window.events.$emit('flash',message);

}

Vue.component('post-component', require('./components/Post.vue'));

Vue.component('flash', require('./components/Flash.vue'));

const app = new Vue({

el: '#app'

});

Step 8: Register Vue App

Now, you need to create a blade view file to define Vue’s app. Go to resources/views folder and make a file named post.blade.php. Then update the below code into post.blade.php file:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel Vue Flash Message Example - w3adda.com</title>
        <link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="app">
            <flash message=""></flash>
            <post-component></post-component>
        </div>
        <script src="{{asset('js/app.js')}}" ></script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Laravel Vue Flash Message Example - w3adda.com</title>

</head>

<body>

<post-component></post-component>

</div>

</body>

</html>

Step 9: Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

npm run dev
 
or 
 
npm run watch

npm run dev

npm run watch

Laravel 7 Vue JS Like Dislike Example

In this Laravel 7 Vue JS Like Dislike Example Tutorial I’ll show you how to implement Like Dislike with Vue Js in laravel. In this tutorial you will learn to create Like Dislike with Vue Js in laravel.

Laravel 7 Vue JS Like Dislike Example

Step 1: Download Laravel Fresh App
Step 2: Add Database Detail
Step 3: Run Make auth Command
Step 4: Create Model And Migration
Step 5: NPM Configuration
Step 6: Add Routes
Step 7: Create Controller By Command
Step 8: Create Vue Component
Step 9: Create Blade Views And Initialize Vue Components
Step 10: Run Development Server

Step 1: Download Laravel Fresh App

First of all we need to create a fresh laravel project, download and install Laravel using the below command

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

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

Step 2: Add Database Details

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=here your database name here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Step 3: Run Make auth Command

cd blog
 
composer require laravel/ui --dev
 
php artisan ui vue --auth

cd blog

composer require laravel/ui --dev

php artisan ui vue --auth

Step 4: Create Model And Migration

Now, in this step we will create model and migration file for form. Please run the following command:

php artisan make:model Post -fm

1	php artisan make:model Post -fm

<?php
 
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
 
class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
       Schema::create('posts', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('title');
            $table->string('slug');
            $table->unsignedBigInteger('user_id');
            $table->unsignedBigInteger('like')->default(0);
            $table->unsignedBigInteger('dislike')->default(0);
            $table->timestamps();
      });
    }
 
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreatePostsTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

Schema::create('posts', function (Blueprint $table) {

$table->bigIncrements('id');

$table->string('title');

$table->string('slug');

$table->unsignedBigInteger('user_id');

$table->unsignedBigInteger('like')->default(0);

$table->unsignedBigInteger('dislike')->default(0);

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('posts');

}

Now, run the migration to create database table using following artisan command:

php artisan migrate

1	php artisan migrate

Next, Navigate to app/Post.php and update the following code into your Post.php model as follow:

namespace App;
 
use Illuminate\Database\Eloquent\Model;
 
class Post extends Model
{
    protected $guarded = [];
 
    public function getRouteKeyName()
    {
        return 'slug';
    }
}

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model

{

protected $guarded = [];

public function getRouteKeyName()

{

return 'slug';

}

Next, Navigate to database/factories and open PostFactory.php. Then update the following code into it as follow:

/** @var \Illuminate\Database\Eloquent\Factory $factory */
 
use App\Post;
use Faker\Generator as Faker;
 
$factory->define(Post::class, function (Faker $faker) {
    return [
       'title' => $faker->sentence,
       'slug' => \Str::slug($faker->sentence),
       'user_id' => 1
    ];
});

/** @var \Illuminate\Database\Eloquent\Factory $factory */

use App\Post;

use Faker\Generator as Faker;

$factory->define(Post::class, function (Faker $faker) {

return [

'title' => $faker->sentence,

'slug' => \Str::slug($faker->sentence),

'user_id' => 1

];

});

and then run the following commad to generate fake data using faker as follow:

php artisan tinker
//and then
factory(\App\Post::class,20)->create()
exit

php artisan tinker

//and then

factory(\App\Post::class,20)->create()

exit

Step 5: NPM Configuration

php artisan preset vue

1	php artisan preset vue

Install all Vue dependencies:

npm install

1	npm install

Step 6: Add Routes

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

//posts listing and view routes
Route::get('post','PostController@index');
Route::get('post/{slug?}','PostController@show')->name('post');
 
//like routes
Route::post('/like','PostController@getlike');
Route::post('/like/{id}','PostController@like');
 
//dislike routes
Route::post('/dislike','PostController@getDislike');
Route::post('/dislike/{id}','PostController@dislike');

//posts listing and view routes

Route::get('post','PostController@index');

Route::get('post/{slug?}','PostController@show')->name('post');

//like routes

Route::post('/like','PostController@getlike');

Route::post('/like/{id}','PostController@like');

//dislike routes

Route::post('/dislike','PostController@getDislike');

Route::post('/dislike/{id}','PostController@dislike');

Step 7: Create Controller By Command

Now, lets create a controller named PostController using command given below –

php artisan make:controller PostController

1	php artisan make:controller PostController

After that, go to app\Http\Controllers and open PostController.php file. Then update the following code into your PostController.php file:

namespace App\Http\Controllers;
 
use App\Post;
use Facades\App\Repository\Posts;
use Illuminate\Http\Request;
 
class PostController extends Controller
{
    public function index()
    {
        $posts = Post::latest()->get();
        return view('posts',['posts' => $posts ]);
    }
 
    public function show(Post $slug)
    {
        return view('single-post',['post' => $slug ]);
    }
 
    public function getlike(Request $request)
    {
        $post = Post::find($request->post);
        return response()->json([
            'post'=>$post,
        ]);
    }
 
    public function like(Request $request)
    {
        $post = Post::find($request->post);
        $value = $post->like;
        $post->like = $value+1;
        $post->save();
        return response()->json([
            'message'=>'Thanks',
        ]);
    }    
 
    public function getDislike(Request $request)
    {
        $post = Post::find($request->post);
        return response()->json([
            'post'=>$post,
        ]);
    }
 
    public function dislike(Request $request)
    {
        $post = Post::find($request->post);
        $value = $post->dislike;
        $post->dislike = $value+1;
        $post->save();
        return response()->json([
            'message'=>'Thanks',
        ]);
    }
}

namespace App\Http\Controllers;

use App\Post;

use Facades\App\Repository\Posts;

use Illuminate\Http\Request;

class PostController extends Controller

{

public function index()

{

$posts = Post::latest()->get();

return view('posts',['posts' => $posts ]);

}

public function show(Post $slug)

{

return view('single-post',['post' => $slug ]);

}

public function getlike(Request $request)

{

$post = Post::find($request->post);

return response()->json([

'post'=>$post,

]);

}

public function like(Request $request)

{

$post = Post::find($request->post);

$value = $post->like;

$post->like = $value+1;

$post->save();

return response()->json([

'message'=>'Thanks',

]);

}

public function getDislike(Request $request)

{

$post = Post::find($request->post);

return response()->json([

'post'=>$post,

]);

}

public function dislike(Request $request)

{

$post = Post::find($request->post);

$value = $post->dislike;

$post->dislike = $value+1;

$post->save();

return response()->json([

'message'=>'Thanks',

]);

}

Step 8: Create Vue Component

Next step, go to resources/assets/js/components folder and create a files called LikeComponent.vue and DisLikeComponent.vue.

Now, update the following code into your LikeComponent.vue components file:

<template>
    <div class="container">
        <p id="success"></p>
       <a href="http://"><i @click.prevent="likePost" class="fa fa-thumbs-up" aria-hidden="true"></i>({{ totallike }})</a>
    </div>
</template>
 
<script>
    export default {
        props:['post'],
        data(){
            return {
                totallike:'',
            }
        },
        methods:{
            likePost(){
                axios.post('/like/'+this.post,{post:this.post})
                .then(response =>{
                    this.getlike()
                    $('#success').html(response.data.message)
                })
                .catch()
            },
            getlike(){
                axios.post('/like',{post:this.post})
                .then(response =>{
                    console.log(response.data.post.like)
                    this.totallike = response.data.post.like
                })
            }
        },
        mounted() {
            this.getlike()
        }
    }
</script>

<a href="http://"><i @click.prevent="likePost" class="fa fa-thumbs-up" aria-hidden="true"></i>({{ totallike }})</a>

</div>

</template>

export default {

props:['post'],

data(){

return {

totallike:'',

}

methods:{

likePost(){

axios.post('/like/'+this.post,{post:this.post})

.then(response =>{

this.getlike()

$('#success').html(response.data.message)

})

.catch()

getlike(){

axios.post('/like',{post:this.post})

.then(response =>{

console.log(response.data.post.like)

this.totallike = response.data.post.like

})

}

mounted() {

this.getlike()

}

</script>

Next, update the following code into DisLikeComponent.vue file as follow:

<template>
    <div class="container">
        <p id="success"></p>
       <a href="http://"><i @click.prevent="disLikePost" class="fa fa-thumbs-down" aria-hidden="true"></i>({{ totalDislike }})</a>
    </div>
</template>
 
<script>
    export default {
        props:['post'],
        data(){
            return {
                totalDislike:'',
            }
        },
        methods:{
            disLikePost(){
                axios.post('/dislike/'+this.post,{post:this.post})
                .then(response =>{
                    this.getDislike()
                    $('#success').html(response.data.message)
                })
                .catch()
            },
            getDislike(){
                axios.post('/dislike',{post:this.post})
                .then(response =>{
                    console.log(response.data.post.dislike)
                    this.totalDislike = response.data.post.dislike
                })
            }
        },
        mounted() {
            this.getDislike()
        }
    }
</script>

<a href="http://"><i @click.prevent="disLikePost" class="fa fa-thumbs-down" aria-hidden="true"></i>({{ totalDislike }})</a>

</div>

</template>

export default {

props:['post'],

data(){

return {

totalDislike:'',

}

methods:{

disLikePost(){

axios.post('/dislike/'+this.post,{post:this.post})

.then(response =>{

this.getDislike()

$('#success').html(response.data.message)

})

.catch()

getDislike(){

axios.post('/dislike',{post:this.post})

.then(response =>{

console.log(response.data.post.dislike)

this.totalDislike = response.data.post.dislike

})

}

mounted() {

this.getDislike()

}

</script>

Now open resources/assets/js/app.js and include the LikeComponent.vue and DisLikeComponent.vue component as follow:

require('./bootstrap');
 
window.Vue = require('vue');
 
Vue.component('like-component', require('./components/LikeComponent.vue').default);
 
Vue.component('dis-like-component', require('./components/DisLikeComponent.vue'));
 
const app = new Vue({
    el: '#app',
});

require('./bootstrap');

window.Vue = require('vue');

Vue.component('like-component', require('./components/LikeComponent.vue').default);

Vue.component('dis-like-component', require('./components/DisLikeComponent.vue'));

const app = new Vue({

el: '#app',

});

Step 9: Create Blade Views And Initialize Vue Components

In this step, navigate to resources/views and create one folder named layouts. Inside this folder create one blade view file named app.blade.php file.

Next, Navigate to resources/views/layouts and open app.blade.php file. Then update the following code into your app.blade.php file as follow:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
 
    <title>Laravel Vue JS Like Dislike Example</title>
 
    <script src="{{ asset('js/app.js') }}" defer></script>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
 
    @stack('fontawesome')
 
</head>
<body>
    <div id="app">
 
        <main class="py-4">
            @yield('content')
        </main>
 
    </div>
</body>
</html>

<!doctype html>

<html>

<head>

<title>Laravel Vue JS Like Dislike Example</title>

@stack('fontawesome')

</head>

<body>

@yield('content')

</main>

</div>

</body>

</html>

Next, Navigate to resources/views/ and create one file name posts.blade.php. Then update the following code into your posts.blade.php file as follow:

@extends('layouts.app')
 
@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Post Lists</div>
 
                <div class="card-body">
                    <ul>
                        @foreach ($posts as $item)
                         <a href="{{ route('post',$item->slug) }}"><li>{{ $item->title }}</li></a>
                        @endforeach
                    </ul>
                </div>
                 
            </div>
        </div>
    </div>
</div>
@endsection

@extends('layouts.app')

@section('content')

<div class="card-header">Post Lists</div>

<ul>

@foreach ($posts as $item)

<a href="{{ route('post',$item->slug) }}"><li>{{ $item->title }}</li></a>

@endforeach

</ul>

</div>

@endsection

Again, Navigate to resources/views/ and create one file name single-post.blade.php. Then update the following code into your single-post.blade.php file as follow:

@extends('layouts.app')
@push('fontawesome')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
@endpush
@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Post Detail</div>
 
                <div class="card-body">
                    <ul>
                       
                         <li>{{ $post->title }}</li>
                         <like-component :post="{{ $post->id }}"></like-component>
                         <dis-like-component :post="{{ $post->id }}"></dis-like-component>
                          
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@extends('layouts.app')

@push('fontawesome')

@endpush

@section('content')

<div class="card-header">Post Detail</div>

<ul>

<li>{{ $post->title }}</li>

<like-component :post="{{ $post->id }}"></like-component>

<dis-like-component :post="{{ $post->id }}"></dis-like-component>

</ul>

</div>

@endsection

Step 10: Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

npm run dev
 
or 
 
npm run watch

npm run dev

npm run watch

Laravel 7 Vue JS Search Filter Example Tutorial

In this Laravel 7 Vue JS Search Filter Example Tutorial I’ll show you how to create search filter with Vue Js in laravel. In this tutorial you will learn to create search filter with Vue Js in laravel.

Step 1: Download Laravel Fresh App
Step 2: Add Database Detail
Step 3: Run Make auth Command
Step 4: Create Model And Migration
Step 5: NPM Configuration
Step 6: Add Routes
Step 7: Create Controller By Command
Step 8: Create Vue Component
Step 9: Create Blade Views And Initialize Vue Components
Step 10: Run Development Server

Step 1: Download Laravel Fresh App

First of all we need to create a fresh laravel project, download and install Laravel using the below command

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

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

Step 2: Add Database Details

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=here your database name here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Step 3: Run Make auth Command

cd blog
composer require laravel/ui --dev
php artisan ui vue --auth

cd blog

composer require laravel/ui --dev

php artisan ui vue --auth

Step 4: Create Model And Migration

Now, in this step we will create model and migration file for form. Please run the following command:

php artisan make:model Post -fm

1	php artisan make:model Post -fm

This command will create one model name post.php and also create one migration file for the posts table.

Now open create_posts_table.php migration file from database>migrations and replace up() function with following code:

<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
       Schema::create('posts', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('title');
            $table->string('slug');
            $table->unsignedBigInteger('user_id');
            $table->integer('active');
            $table->timestamps();
      });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreatePostsTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

Schema::create('posts', function (Blueprint $table) {

$table->bigIncrements('id');

$table->string('title');

$table->string('slug');

$table->unsignedBigInteger('user_id');

$table->integer('active');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('posts');

}

Now, run the migration to create database table using following artisan command:

php artisan migrate

1	php artisan migrate

Next, Navigate to app/Post.php and update the following code into your Post.php model as follow:

namespace App;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
    protected $guarded = [];
}

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model

{

protected $guarded = [];

}

Next, Navigate to database/factories and open PostFactory.php. Then update the following code into it as follow:

/** @var \Illuminate\Database\Eloquent\Factory $factory */
use App\Post;
use Faker\Generator as Faker;
$factory->define(Post::class, function (Faker $faker) {
    return [
       'title' => $faker->sentence,
       'slug' => \Str::slug($faker->sentence),
       'user_id' => 1,
       'active' => $faker->numberBetween(0,1)
    ];
});

/** @var \Illuminate\Database\Eloquent\Factory $factory */

use App\Post;

use Faker\Generator as Faker;

$factory->define(Post::class, function (Faker $faker) {

return [

'title' => $faker->sentence,

'slug' => \Str::slug($faker->sentence),

'user_id' => 1,

'active' => $faker->numberBetween(0,1)

];

});

and then run the following commad to generate fake data using faker as follow:

php artisan tinker
//and then
factory(\App\Post::class,30)->create()
exit

php artisan tinker

//and then

factory(\App\Post::class,30)->create()

exit

Step 5: NPM Configuration

php artisan preset vue

1	php artisan preset vue

Install all Vue dependencies:

npm install

1	npm install

Step 6: Add Routes

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

//filter 
Route::get('filter','PostController@index');
Route::post('filter','PostController@getpost');

//filter

Route::get('filter','PostController@index');

Route::post('filter','PostController@getpost');

Step 7: Create Controller By Command

Now, lets create a controller named PostController using command given below –

php artisan make:controller PostController

1	php artisan make:controller PostController

After that, go to app\Http\Controllers and open PostController.php file. Then update the following code into your PostController.php file:

<?php
namespace App\Http\Controllers;
use App\Post;
use Illuminate\Http\Request;
use Facades\App\Repository\Posts;
class PostController extends Controller
{
    public function index()
    {
        $posts = Posts::allPosts();
         
        return view('filter',['posts' => $posts ]);
    }
    public function getpost(Request $request)
    {
        $posts=Post::where('active',$request->sort)->get();
        return response()->json([
            'post'=>$posts
        ]);
         
    }
}

<?php

namespace App\Http\Controllers;

use App\Post;

use Illuminate\Http\Request;

use Facades\App\Repository\Posts;

class PostController extends Controller

{

public function index()

{

$posts = Posts::allPosts();

return view('filter',['posts' => $posts ]);

}

public function getpost(Request $request)

{

$posts=Post::where('active',$request->sort)->get();

return response()->json([

'post'=>$posts

]);

}

Step 8: Create Vue Component

Next step, go to resources/assets/js/components folder and create a file called FilterComponent.vue. Now, update the following code into your FilterComponent.vue components file:

<template>
    <div class="container">
         
        <div class="card-header">
            <select  id="" v-model="sort" @change="sortValue">
                <option value="1" >Active</option>
                <option value="0" >In-Active</option>
            </select>
        </div>
        <div class="card-body">
            <ul v-for="post in post" :key='post.id'>
                <li>{{ post.title }} {{ post.active }} </li>
            </ul>
        </div>
    </div>
</template>
<script>
    export default {
        props:['post'],
        data(){
            return {
                posts:'',
                sort:'',
            }
        },
        methods:{
           loadPost(){
               this.post=this.post
           },
           sortValue(){
               axios.post('/filter',{ sort:this.sort })
               .then(response => ( this.post=response.data.post ))
           }
        },
        mounted() {
            console.log('console filter componet')
        }
    }
</script>

<option value="1" >Active</option>

<option value="0" >In-Active</option>

</select>

</div>

<li>{{ post.title }} {{ post.active }} </li>

</ul>

</div>

</template>

export default {

props:['post'],

data(){

return {

posts:'',

sort:'',

}

methods:{

loadPost(){

this.post=this.post

sortValue(){

axios.post('/filter',{ sort:this.sort })

.then(response => ( this.post=response.data.post ))

}

mounted() {

console.log('console filter componet')

}

</script>

Now open resources/assets/js/app.js and include the FilterComponent.vue component as follow:

require('./bootstrap');
window.Vue = require('vue');
Vue.component('filter-component', require('./components/FilterComponent.vue').default);
const app = new Vue({
    el: '#app',
});

require('./bootstrap');

window.Vue = require('vue');

Vue.component('filter-component', require('./components/FilterComponent.vue').default);

const app = new Vue({

el: '#app',

});

Step 9: Create Blade Views And Initialize Vue Components

In this step, navigate to resources/views and create one folder named layouts. Inside this folder create one blade view file named app.blade.php file.

Next, Navigate to resources/views/layouts and open app.blade.php file. Then update the following code into your app.blade.php file as follow:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Laravel Vue JS Search Filter Example Tutorial</title>
    <script src="{{ asset('js/app.js') }}" defer></script>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    @stack('fontawesome')
</head>
<body>
    <div id="app">
        <main class="py-4">
            @yield('content')
        </main>
    </div>
</body>
</html>

<!doctype html>

<html>

<head>

<title>Laravel Vue JS Search Filter Example Tutorial</title>

@stack('fontawesome')

</head>

<body>

@yield('content')

</main>

</div>

</body>

</html>

Next, Navigate to resources/views/ and create one file name filter.blade.php. Then update the following code into your filter.blade.php file as follow:

@extends('layouts.app')
@section('content')
<div class="container">
    <div class="row justify-content-center">
         
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Dashboard</div>
                     
                <div class="card-body">
                  <filter-component :post = "{{ $posts }}"></filter-component>
                </div>
                 
            </div>
        </div>
    </div>
</div>
@endsection

@extends('layouts.app')

@section('content')

<div class="card-header">Dashboard</div>

<filter-component :post = "{{ $posts }}"></filter-component>

</div>

@endsection

Step 10: Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

npm run dev
or 
npm run watch

npm run dev

npm run watch

Laravel 7 Summernote Example Tutorial

In this Laravel 7 Summernote Example Tutorial Tutorial I’ll show you how to use Summernote in laravel. In this tutorial you will learn to use Summernote in laravel.

Laravel 7 Summernote Example Tutorial

Step 1: Install Laravel App
Step 2: Add Database Details
Step 3: Create Migration and Model File
Step 4: Add Routes
Step 5: Create Controler
Step 6: Create Blade File
Step 7: Run Development Server

Step 1: Install Laravel App

First of all we need to create a fresh laravel project, download and install Laravel using the below command

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

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

Step 2: Add Database Details

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Enter_Your_Database_Name
DB_USERNAME=Enter_Your_Database_Username
DB_PASSWORD=Enter_Your_Database_Password

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=Enter_Your_Database_Name

DB_USERNAME=Enter_Your_Database_Username

DB_PASSWORD=Enter_Your_Database_Password

Step 3: Create Migration and Model File

Now, in this step we will create model and migration file for form. Please run the following command:

php artisan make:model Post -m

1	php artisan make:model Post -m

Next, Navigate to database/migrations and open create_posts_table.php. Then update the following code into create_books_table.php file, as follow:

<?php
 
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
 
class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->longText('description');
            $table->timestamps();
        });
    }
 
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

<?php

use Illuminate\Database\Migrations\Migration;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;

class CreatePostsTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

Schema::create('posts', function (Blueprint $table) {

$table->id();

$table->string('title');

$table->longText('description');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('posts');

}

Now, run the migration to create database table using following artisan command:

php artisan migrate

1	php artisan migrate

After that, Navigate to App directory and open Post.php model file. Then add the following code into Post.php model file, as follow:

app/Post.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    protected $fillable = ['title','description'];
}

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model

{

protected $fillable = ['title','description'];

}

Step 4: Add Routes

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

Route::get('posts','PostController@index');
Route::post('posts','PostController@store')->name(posts.store);
Route::get('posts/{id}','PostController@show')->name(posts.show);

Route::get('posts','PostController@index');

Route::post('posts','PostController@store')->name(posts.store);

Route::get('posts/{id}','PostController@show')->name(posts.show);

Step 5: Create Controler

Now, lets create a controller named PostController using command given below –

php artisan make:controller PostController

1	php artisan make:controller PostController

Then, Navigate to app/http/controllers and open PostController.php file. And update the following code into your PostController.php file, as follow:

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use App\Post;
 
class PostController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('create');
    }
 
    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $input = $request->all();
        Post::create($input);
        return redirect()->back();
    }
 
    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show(Post $post)
    {
        return view('display',compact('post'));
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Post;

class PostController extends Controller

{

/**

* Display a listing of the resource.

* @return \Illuminate\Http\Response

public function index()

{

return view('create');

}

/**

* Store a newly created resource in storage.

* @param \Illuminate\Http\Request $request

* @return \Illuminate\Http\Response

public function store(Request $request)

{

$input = $request->all();

Post::create($input);

return redirect()->back();

}

/**

* Display the specified resource.

* @param int $id

* @return \Illuminate\Http\Response

public function show(Post $post)

{

return view('display',compact('post'));

}

Step 6: Create Blade File

In this step, Navigate to resources/views folder. And create 2 blade views that named display.blade.php and create.blade.php the file inside this folder.

Then open create.blade.php file and update the following code into create.blade.php file, as follow:

<!DOCTYPE html>
<html>
<head>
<title>How To Use Summernote Editor In Laravel</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/summernote.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 offset-2 mt-5">
<div class="card">
<div class="card-header bg-info">
<h6 class="text-white">Laravel Summernote Example Tutorial</h6>
</div>
<div class="card-body">
<form method="post" action="{{ route('posts.store') }}" enctype="multipart/form-data">
@csrf
<div class="form-group">
<label>Title</label>
<input type="text" name="title" class="form-control"/>
</div>  
<div class="form-group">
<label><strong>Description :</strong></label>
<textarea class="summernote" name="description"></textarea>
</div>
<div class="form-group text-center">
<button type="submit" class="btn btn-success btn-sm">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.summernote').summernote();
});
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>How To Use Summernote Editor In Laravel</title>

</head>

<body>

<h6 class="text-white">Laravel Summernote Example Tutorial</h6>

</div>

@csrf

<label>Title</label>

</div>

<label><strong>Description :</strong></label>

</div>

</div>

</form>

</div>

$(document).ready(function() {

$('.summernote').summernote();

});

</script>

</body>

</html>

Now open display.blade.php file and update the following code into your list.blade.php file, as follow:

<!DOCTYPE html>
<html>
<head>w3adda<title>Use Summernote Editor In Laravel</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="showimages"></div>
</div>
<div class="col-md-6 offset-3 mt-5">
<div class="card">
<div class="card-header bg-info">
<h6 class="text-white">Use Summernote Editor In Laravel</h6>
</div>
<div class="card-body">
<table class="table table-bordered">
<tr>
<th>No.</th>
<th>Title</th>
<th>Description</th>
</tr>
<tr>
<td>{{ $post->id }}</td>
<td>{{ $post->title }}</td>
<td>{!! $post->description !!}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>w3adda<title>Use Summernote Editor In Laravel</title>

</head>

<body>

</div>

<h6 class="text-white">Use Summernote Editor In Laravel</h6>

</div>

<tr>

<th>Title</th>

<th>Description</th>

</tr>

<tr>

<td>{{ $post->title }}</td>

<td>{!! $post->description !!}</td>

</tr>

</table>

</div>

</body>

</html>

Step 7: Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

http://localhost:8000/posts

1	http://localhost:8000/posts

Laravel 7 Summernote Image Upload Example

In this Laravel 7 Summernote Image Upload Example tutorial, I’ll show you how to use Summernote for Image Upload in laravel. In this tutorial you will learn to upload image using Summernote in laravel.

Laravel 7 Summernote Image Upload Example

Step 1: Install Laravel App
Step 2: Add Database Details
Step 3: Create Migration and Model File
Step 4: Add Routes
Step 5: Create Controller
Step 6: Create Blade File
Step 7: Run Development Server

Step 1: Install Laravel App

First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command

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

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

Step 2: Add Database Details

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Enter_Your_Database_Name
DB_USERNAME=Enter_Your_Database_Username
DB_PASSWORD=Enter_Your_Database_Password

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=Enter_Your_Database_Name

DB_USERNAME=Enter_Your_Database_Username

DB_PASSWORD=Enter_Your_Database_Password

Step 3: Create Migration and Model File

Now, in this step we will create model and migration file for form. Please run the following command:

php artisan make:model Post -m

1	php artisan make:model Post -m

Next, Navigate to database/migrations and open create_posts_table.php. Then update the following code into create_books_table.php file, as follow:

<?php
 
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
 
class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->longText('description');
            $table->timestamps();
        });
    }
 
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

<?php

use Illuminate\Database\Migrations\Migration;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;

class CreatePostsTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

Schema::create('posts', function (Blueprint $table) {

$table->id();

$table->string('title');

$table->longText('description');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('posts');

}

Now, run the migration to create database table using following artisan command:

php artisan migrate

1	php artisan migrate

Now, go to App directory and open Post.php model file. Then add the following code into Post.php model file, as follow:

app/Post.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    protected $fillable = ['title','description'];
}

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model

{

protected $fillable = ['title','description'];

}

Step 4: Add Routes

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

Route::get('summernote-image-upload','PostController@index');
Route::post('post-summernote-image-upload','PostController@store');

1 2	Route::get('summernote-image-upload','PostController@index'); Route::post('post-summernote-image-upload','PostController@store');

Step 5: Create Controller

Now, lets create a controller named PostController using command given below –

php artisan make:controller PostController

1	php artisan make:controller PostController

Then, Navigate to app/http/controllers and open PostController.php file. And update the following code into your PostController.php file, as follow:

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use App\Post;
 
class PostController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('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',
 
             'description' => 'required'
 
        ]);
 
    
       $description = $request->description;
 
       $dom = new \DomDocument();
 
       $dom->loadHtml($description, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);    
 
       $images = $dom->getElementsByTagName('img');
 
       foreach($images as $k => $img){
 
 
           $data = $img->getAttribute('src');
 
           list($type, $data) = explode(';', $data);
 
           list($type, $data) = explode(',', $data);
 
           $data = base64_decode($data);
 
           $image_name= "/upload/" . time().$k.'.png';
 
           $path = public_path() . $image_name;
 
           file_put_contents($path, $data);
 
           $img->removeAttribute('src');
 
           $img->setAttribute('src', $image_name);
 
        }
 
 
       $description = $dom->saveHTML();
 
       $summernote = new Post;
 
       $summernote->title = $request->title;
 
       $summernote->description = $description;
 
       $summernote->save();
 
 
 
   echo "<h1>Title</h1>" , $Title;
 
   echo "<h2>Description</h2>" , $description;
 
   }
 
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Post;

class PostController extends Controller

{

/**

* Display a listing of the resource.

* @return \Illuminate\Http\Response

public function index()

{

return view('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',

'description' => 'required'

]);

$description = $request->description;

$dom = new \DomDocument();

$dom->loadHtml($description, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);

$images = $dom->getElementsByTagName('img');

foreach($images as $k => $img){

$data = $img->getAttribute('src');

list($type, $data) = explode(';', $data);

list($type, $data) = explode(',', $data);

$data = base64_decode($data);

$image_name= "/upload/" . time().$k.'.png';

$path = public_path() . $image_name;

file_put_contents($path, $data);

$img->removeAttribute('src');

$img->setAttribute('src', $image_name);

}

$description = $dom->saveHTML();

$summernote = new Post;

$summernote->title = $request->title;

$summernote->description = $description;

$summernote->save();

echo "<h1>Title</h1>" , $Title;

echo "<h2>Description</h2>" , $description;

}

Step 6: Create Blade File

In this step, Navigate to resources/views folder. And create a blade views that named create.blade.php the file inside this folder. Then open create.blade.php file and update the following code into create.blade.php file, as follow:

<!DOCTYPE html>
<html>
<title>Laravel Summernote Image Upload Example Tutorial</title>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script> 
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<!-- include summernote css/js-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.4/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.4/summernote.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 offset-2 mt-5">
<div class="card">
<div class="card-header bg-info">
<h6 class="text-white">Laravel Summernote Image Upload Example</h6>
</div>
<div class="card-body">
<form method="post" action="{{ url('post-summernote-image-upload') }}" enctype="multipart/form-data">
@csrf
<div class="form-group">
<label>Title</label>
<input type="text" name="title" class="form-control"/>
</div>  
<div class="form-group">
<label><strong>Description :</strong></label>
<textarea class="summernote" name="description"></textarea>
</div>
<div class="form-group text-center">
<button type="submit" class="btn btn-success btn-sm">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.summernote').summernote({
height: 300,
});
});
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<title>Laravel Summernote Image Upload Example Tutorial</title>

</head>

<body>

<h6 class="text-white">Laravel Summernote Image Upload Example</h6>

</div>

@csrf

<label>Title</label>

</div>

<label><strong>Description :</strong></label>

</div>

</div>

</form>

</div>

$(document).ready(function() {

$('.summernote').summernote({

height: 300,

});

</script>

</body>

</html>

Step 7: Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

http://localhost:8000/summernote-image-upload

1	http://localhost:8000/summernote-image-upload

Laravel 7 Vue JS Datatables Example Tutorial

In this Laravel 7 Vue JS Datatables Example Tutorial I’ll show you how to use Datatables with Vue Js in laravel. In this tutorial you will learn to use datatables with Vue Js in laravel.

Laravel 7 Vue JS Datatables Example Tutorial

Download Laravel Fresh App
Add Database Detail
Create Model And Migration
NPM Configuration
Add Routes
Create Controller By Command
Create Vue Component
Create Blade Views And Initialize Vue Components
Run Development Server

Step 1: Download Laravel Fresh App

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

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

Step 2: Add Database Details

DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=here your database name here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Step 3: Create Model And Migration

Now, in this step we will create model and migration file for form. Please run the following command:

php artisan make:model Post -fm

1	php artisan make:model Post -fm

This command will create one model name post.php and also create one migration file for the posts table. Now open create_posts_table.php migration file and put the following code in it:

<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
       Schema::create('posts', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('title');
            $table->string('slug');
            $table->timestamps();
      });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreatePostsTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

Schema::create('posts', function (Blueprint $table) {

$table->bigIncrements('id');

$table->string('title');

$table->string('slug');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('posts');

}

Now, run the migration to create database table using following artisan command:

php artisan migrate

1	php artisan migrate

Next, Navigate to app/Post.php and update the following code into your Post.php model as follow:

<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
    protected $guarded = [];
}

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model

{

protected $guarded = [];

}

Next, Navigate to database/factories and open PostFactory.php. Then update the following code into it as follow:

/** @var \Illuminate\Database\Eloquent\Factory $factory */
use App\Post;
use Faker\Generator as Faker;
$factory->define(Post::class, function (Faker $faker) {
    return [
       'title' => $faker->sentence,
       'slug' => \Str::slug($faker->sentence)
    ];
});

/** @var \Illuminate\Database\Eloquent\Factory $factory */

use App\Post;

use Faker\Generator as Faker;

$factory->define(Post::class, function (Faker $faker) {

return [

'title' => $faker->sentence,

'slug' => \Str::slug($faker->sentence)

];

});

now run the following command to generate fake data using faker as follow:

php artisan tinker
//and then
factory(\App\Post::class,100)->create()
exit

php artisan tinker

//and then

factory(\App\Post::class,100)->create()

exit

Step 4: NPM Configuration

You need to setup Vue and install Vue dependencies using NPM. So run the following command on command prompt:

php artisan preset vue

1	php artisan preset vue

Install all Vue dependencies:

npm install

1	npm install

Install vuejs-datatable:

npm install vuejs-datatable

1	npm install vuejs-datatable

Step 5: Add Routes

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

//all posts
Route::get('posts','PostController@index');

1 2	//all posts Route::get('posts','PostController@index');

Step 6: Create Controller By Command

Now, lets create a controller named PostController using command given below –

php artisan make:controller PostController

1	php artisan make:controller PostController

After that, go to app\Http\Controllers and open PostController.php file. Then update the following code into your PostController.php file:

namespace App\Http\Controllers;
use App\Post;
use Illuminate\Http\Request;
use Facades\App\Repository\Posts;
class PostController extends Controller
{
    public function index(Request $request)
    {
        $posts = Post::get();
        return response()->json($posts);
         
    }
}

namespace App\Http\Controllers;

use App\Post;

use Illuminate\Http\Request;

use Facades\App\Repository\Posts;

class PostController extends Controller

{

public function index(Request $request)

{

$posts = Post::get();

return response()->json($posts);

}

Step 7: Create Vue Component

Next step, go to resources/assets/js/components folder and create a file called DataTableComponent.vue.

Now, update the following code into your DataTableComponent.vue components file:

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Laravel Vue Datatables Component Example</div>
   
                    <div class="card-body">
                        <datatable :columns="columns" :data="rows"></datatable>
                        <datatable-pager v-model="page" type="abbreviated" :per-page="per_page"></datatable-pager>
   
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
   
<script>
   
    import DatatableFactory from 'vuejs-datatable';
   
    export default {
        components: { DatatableFactory },
        mounted() {
            console.log('Component mounted.')
        },
        data(){
            return {
                columns: [
                        {label: 'id', field: 'id'}, 
                        {label: 'Title', field: 'title'},
                        {label: 'Slug', field: 'slug'}
                    ],
                rows: [],
                page: 1,
                per_page: 10,
            }
        },
        methods:{
            getPosts: function() {
                axios.get('/posts').then(function(response){
                    this.rows = response.data;
                }.bind(this));
            }
        },
        created: function(){
            this.getPosts()
        }
    }
</script>

<div class="card-header">Laravel Vue Datatables Component Example</div>

<datatable-pager v-model="page" type="abbreviated" :per-page="per_page"></datatable-pager>

</div>

</template>

import DatatableFactory from 'vuejs-datatable';

export default {

components: { DatatableFactory },

mounted() {

console.log('Component mounted.')

data(){

return {

columns: [

{label: 'id', field: 'id'},

{label: 'Title', field: 'title'},

{label: 'Slug', field: 'slug'}

rows: [],

page: 1,

per_page: 10,

}

methods:{

getPosts: function() {

axios.get('/posts').then(function(response){

this.rows = response.data;

}.bind(this));

}

created: function(){

this.getPosts()

}

</script>

Now open resources/assets/js/app.js and include the DataTableComponent.vue component as follow:

require('./bootstrap');
window.Vue = require('vue');
Vue.component('datatable-component', require('./components/DataTableComponent.vue').default);
const app = new Vue({
    el: '#app',
});

require('./bootstrap');

window.Vue = require('vue');

Vue.component('datatable-component', require('./components/DataTableComponent.vue').default);

const app = new Vue({

el: '#app',

});

Step 8: Create Blade Views And Initialize Vue Components

In this step, navigate to resources/views and create one folder named layouts. Inside this folder create one blade view file named app.blade.php file.

Next, Navigate to resources/views/layouts and open app.blade.php file. Then update the following code into your app.blade.php file as follow:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Laravel Vue JS DataTable Example Tutorial</title>
    <script src="{{ asset('js/app.js') }}" defer></script>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    @stack('fontawesome')
</head>
<body>
    <div id="app">
        <main class="py-4">
            @yield('content')
        </main>
    </div>
</body>
</html>

<!doctype html>

<html>

<head>

<title>Laravel Vue JS DataTable Example Tutorial</title>

@stack('fontawesome')

</head>

<body>

@yield('content')

</main>

</div>

</body>

</html>

Now, Navigate to resources/views/ and open welocome.blade.php. Then update the following code into your welcome.blade.php file as follow:

@extends('layouts.app')
@section('content')
<div class="container">
    <div class="row justify-content-center">
         
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Laravel Vue Js DataTable Example</div>
                     
                <div class="card-body">
                  <datatable-component></datatable-component>
                </div>
                 
            </div>
        </div>
    </div>
</div>
@endsection

@extends('layouts.app')

@section('content')

<div class="card-header">Laravel Vue Js DataTable Example</div>

<datatable-component></datatable-component>

</div>

@endsection

Step 9: Run Development Server

npm run dev
or 
npm run watch

npm run dev

npm run watch

Laravel 7/6 Ajax Form Submit Validation Tutorial

In this Laravel 7/6 Ajax Form Submit Validation Tutorial I’ll show you how to submit form using ajax with validation in laravel 7 and 6. In this tutorial you will learn to submit form using ajax and to implement form validation in laravel.

Laravel 7/6 Ajax Form Submit Validation Tutorial

Install Laravel Fresh Setup
Configure .env file
Create One Model and Migration
Make Route
Generate Controller by Command
Create Blade View
Start Development Server

Install Laravel Fresh Setup

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

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

Configure .env file

DB_CONNECTION=mysql 
 DB_HOST=127.0.0.1 
 DB_PORT=3306 
 DB_DATABASE=here your database name here
 DB_USERNAME=here database username here
 DB_PASSWORD=here database password here

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Create Model and Migration

Now, in this step we will create model and migration file for form. Please run the following command:

php artisan make:model Contact -m

1	php artisan make:model Contact -m

Once above command is executed there will be a migration file created inside database/migrations/ directory. Now, open contact migration file and put the below code here :

<?php

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

class CreateContactsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('contacts', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->string('email');
            $table->string('mobile_number');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('contacts');
    }
}

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreateContactsTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

Schema::create('contacts', function (Blueprint $table) {

$table->increments('id');

$table->string('name');

$table->string('email');

$table->string('mobile_number');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('contacts');

}

Now, run the migration to create database table using following artisan command:

php artisan migrate

1	php artisan migrate

Make Route

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

 Route::get('ajax-form-submit', 'FormController@index');
 Route::post('save-form', 'FormController@store');

1 2	Route::get('ajax-form-submit', 'FormController@index'); Route::post('save-form', 'FormController@store');

Generate Controller by Command

Now, lets create a form controller. Create a controller named FormController using command given below –

php artisan make:controller FormController

1	php artisan make:controller FormController

Now, we will create two methods in controller file. The first is index method to display contact form and second method to store data in the mysql database :

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Validator,Redirect,Response;
use App\Contact;

class FormController extends Controller
{

    public function index()
    {
        return view('ajax-form');
    }       

    public function store(Request $request)
    {  
        request()->validate([
        'name' => 'required',
        'email' => 'required|email|unique:users',
        'mobile_number' => 'required|unique:users'
        ]);
        
        $data = $request->all();
        $check = Contact::insert($data);
        $arr = array('msg' => 'Something goes to wrong. Please try again lator', 'status' => false);
        if($check){ 
        $arr = array('msg' => 'Successfully submit form using ajax', 'status' => true);
        }
        return Response()->json($arr);
      
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use Validator,Redirect,Response;

use App\Contact;

class FormController extends Controller

{

public function index()

{

return view('ajax-form');

}

public function store(Request $request)

{

request()->validate([

'name' => 'required',

'email' => 'required|email|unique:users',

'mobile_number' => 'required|unique:users'

]);

$data = $request->all();

$check = Contact::insert($data);

$arr = array('msg' => 'Something goes to wrong. Please try again lator', 'status' => false);

if($check){

$arr = array('msg' => 'Successfully submit form using ajax', 'status' => true);

}

return Response()->json($arr);

}

Step 6: Create a blade view

In this step, we will create one blade file name ajax-form.blade.php.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>laravel 6 Ajax Form Submission Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/additional-methods.min.js"></script>
<style>
.error{ color:red; } 
</style>
</head>
<body>
<div class="container">
<h2 style="margin-top: 10px;">laravel 6 Ajax Form Submission Example</h2>
<br>
<br>
<form id="contact_us" method="post" action="javascript:void(0)">
@csrf
<div class="form-group">
<label for="formGroupExampleInput">Name</label>
<input type="text" name="name" class="form-control" id="formGroupExampleInput" placeholder="Please enter name">
<span class="text-danger">{{ $errors->first('name') }}</span>
</div>
<div class="form-group">
<label for="email">Email Id</label>
<input type="text" name="email" class="form-control" id="email" placeholder="Please enter email id">
<span class="text-danger">{{ $errors->first('email') }}</span>
</div>      
<div class="form-group">
<label for="mobile_number">Mobile Number</label>
<input type="text" name="mobile_number" class="form-control" id="mobile_number" placeholder="Please enter mobile number" maxlength="10">
<span class="text-danger">{{ $errors->first('mobile_number') }}</span>
</div>
<div class="alert alert-success d-none" id="msg_div">
<span id="res_message"></span>
</div>
<div class="form-group">
<button type="submit" id="send_form" class="btn btn-success">Submit</button>
</div>
</form>
</div>
<script>
if ($("#contact_us").length > 0) {
$("#contact_us").validate({
rules: {
name: {
required: true,
maxlength: 50
},
mobile_number: {
required: true,
digits:true,
minlength: 10,
maxlength:12,
},
email: {
required: true,
maxlength: 50,
email: true,
},    
},
messages: {
name: {
required: "Please enter name",
maxlength: "Your last name maxlength should be 50 characters long."
},
mobile_number: {
required: "Please enter contact number",
digits: "Please enter only numbers",
minlength: "The contact number should be 10 digits",
maxlength: "The contact number should be 12 digits",
},
email: {
required: "Please enter valid email",
email: "Please enter valid email",
maxlength: "The email name should less than or equal to 50 characters",
},
},
submitHandler: function(form) {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$('#send_form').html('Sending..');
$.ajax({
url: 'http://localhost/blog/save-form' ,
type: "POST",
data: $('#contact_us').serialize(),
success: function( response ) {
$('#send_form').html('Submit');
$('#res_message').show();
$('#res_message').html(response.msg);
$('#msg_div').removeClass('d-none');
document.getElementById("contact_us").reset(); 
setTimeout(function(){
$('#res_message').hide();
$('#msg_div').hide();
},10000);
}
});
}
})
}
</script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

<!doctype html>

<head>

<title>laravel 6 Ajax Form Submission Example</title>

<style>

.error{ color:red; }

</style>

</head>

<body>

<h2 style="margin-top: 10px;">laravel 6 Ajax Form Submission Example</h2>

<br>

@csrf

<span class="text-danger">{{ $errors->first('name') }}</span>

</div>

<label for="email">Email Id</label>

<span class="text-danger">{{ $errors->first('email') }}</span>

</div>

<label for="mobile_number">Mobile Number</label>

<span class="text-danger">{{ $errors->first('mobile_number') }}</span>

</div>

</div>

<button type="submit" id="send_form" class="btn btn-success">Submit</button>

</div>

</form>

</div>

if ($("#contact_us").length > 0) {

$("#contact_us").validate({

rules: {

name: {

required: true,

maxlength: 50

mobile_number: {

required: true,

digits:true,

minlength: 10,

maxlength:12,

email: {

required: true,

maxlength: 50,

email: true,

messages: {

name: {

required: "Please enter name",

maxlength: "Your last name maxlength should be 50 characters long."

mobile_number: {

required: "Please enter contact number",

digits: "Please enter only numbers",

minlength: "The contact number should be 10 digits",

maxlength: "The contact number should be 12 digits",

email: {

required: "Please enter valid email",

email: "Please enter valid email",

maxlength: "The email name should less than or equal to 50 characters",

submitHandler: function(form) {

$.ajaxSetup({

headers: {

'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

}

});

$('#send_form').html('Sending..');

$.ajax({

url: 'http://localhost/blog/save-form' ,

type: "POST",

data: $('#contact_us').serialize(),

success: function( response ) {

$('#send_form').html('Submit');

$('#res_message').show();

$('#res_message').html(response.msg);

$('#msg_div').removeClass('d-none');

document.getElementById("contact_us").reset();

setTimeout(function(){

$('#res_message').hide();

$('#msg_div').hide();

},10000);

}

});

}

})

}

</script>

</body>

</html>

Step 7: Start Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve
 If you want to run the project diffrent port so use this below command 
 php artisan serve --port=8080

php artisan serve

If you want to run the project diffrent port so use this below command

php artisan serve --port=8080

Now, open the following URL in browser to see the output –

http://127.0.0.1:8000/ajax-form-submit

1	http://127.0.0.1:8000/ajax-form-submit

Codeigniter 4 Google Autocomplete Address Search Box Tutorial

In this Codeigniter 4 Google Autocomplete Address Search Box Tutorial, I’ll show you how to integrate Address or location Autocomplete using Google Autocomplete in CodeIgniter 4. In this tutorial you will learn to implement google autocomplete in codeigniter 4.

Google Autocomplete

Google autocomplete widget is used to display suggestions for places, address and location as soon as the user starts typing in the given input box.

In this codeigniter 4 google autocomplete tutorial I’ll demonstrate you step by step process to integrate google autocomplete in codeigniter 4 project. Pleasae follow the instructions given below:

Create Codeigniter Project
CI Error Handling
Get Google Maps API Key
Connect to Database
Create Controller
Create Route
Add Autocomplete Widget in View
Run CI Application

Create Codeigniter Project

First of all we need to create a fresh codeigniter project, download and install codeigniter through composer using following command:

composer create-project codeigniter4/appstarter

1	composer create-project codeigniter4/appstarter

CI Error Handling

In this step we will change display_errors prop’s value to 1 in app/Config/Boot/production.php for error debugging,

app/Config/Boot/production.php

ini_set('display_errors', '1');

1	ini_set('display_errors', '1');

Get Google Maps API Key

Now, we need to get Google API key to enable the communication between client and Google server. Now follow the instructions given below to get Google API Key:

Visit Google Cloud Platform.
Click on the project dropdown at the top to create the project.
Click APIs & Services > Credentials.
Now, click on Create Credentials > API key.
Copy google API and store in some text file.
Now we need to enable few services, so click on Credentials > “Enable APIs and Services”, additionally enable “Maps JavaScript API” and “Places API” services.

Laravel 8 Login with Facebook Account Example

In this Login with facebook in Laravel 8 example tutorial I’ll show you how to integrate facebook login in laravel 8 using socialite package. Integrating Facebook login in Laravel 8 using socialite package is much easier. Allowing users to login with their social media accounts makes registration/login process much easier, it also encourages more users to register for your application.

In this step by step tutorial, you will learn to integrate Facebook login with your laravel 8 application. Please follow the steps give below:

Install Laravel 8 App
Configure Database With App
Configure Facebook App
Install Socialite & Configure
Add Field In Table Using Migration
Install Jetstream Auth
Build Routes
Create Facebook Login Controller By Command
Integrate FB Login Button In Login Page
Start Development Server

Install Laravel 8

First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command

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

1	composer create-project --prefer-dist laravel/laravel lara8blog

Configure Database In .env file

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=lara8blog
DB_USERNAME=root
DB_PASSWORD=

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=lara8blog

DB_USERNAME=root

DB_PASSWORD=

Configure Facebook App

Step 1:-

Go to Facebook’s developers site https://developers.facebook.com/ and log in with your Facebook account. There in Facebook developers Dashboard you have option to Create App. Lets create a Facebook Login App simply providing App Name and Contact Email.

Step 2:-

After creating the facebook app, go to setting->advanced and set redirect url

Step 3:-

Then, go to Facebook Login -> Settings and scroll down to “Valid OAuth Redirect URL” and set your callback URL

Step 4:-

After creating app, go to Settings -> Basic and get your newly created App ID and App Secret.

Now, go to config directory and open service.php file and add the client id, secret and callback url:

'facebook' => [
    'client_id' => 'xxxx',
    'client_secret' => 'xxx',
    'redirect' => 'http://127.0.0.1:8000/callback/facebook',
  ],

'facebook' => [

'client_id' => 'xxxx',

'client_secret' => 'xxx',

'redirect' => 'http://127.0.0.1:8000/callback/facebook',

Install Socialite Package via Composer

composer require laravel/socialite

1	composer require laravel/socialite

After Installing ‘socialite’ package, we need to add service provider and alias in config/app.php file as following.

config/app.php

'providers' => [
      // Other service providers…
  Laravel\Socialite\SocialiteServiceProvider::class,
 ],

'aliases' => [
 // Other aliases…
 'Socialite' => Laravel\Socialite\Facades\Socialite::class,
 ],

'providers' => [

// Other service providers…

Laravel\Socialite\SocialiteServiceProvider::class,

'aliases' => [

// Other aliases…

'Socialite' => Laravel\Socialite\Facades\Socialite::class,

Add Field In Table Using Migration

Now, use the following command to create a migration file to add a column in database table:

php artisan make:migration add_social_login_field

1	php artisan make:migration add_social_login_field

Once this command is executed you will find a migration file created under “database/migrations”. lets open migration file and put following code in it –

<?php
   
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
    
class AddSoicalLoginField extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::table('users', function ($table) {
            $table->string('social_id')->nullable();
            $table->string('social_type')->nullable();
        });
    }
    
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::table('users', function ($table) {
            $table->dropColumn('social_id');
           $table->dropColumn('social_type');
         });
    }
}

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class AddSoicalLoginField extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

Schema::table('users', function ($table) {

$table->string('social_id')->nullable();

$table->string('social_type')->nullable();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::table('users', function ($table) {

$table->dropColumn('social_id');

$table->dropColumn('social_type');

});

}

After successfully add field in database table. Then add fillable property in User.php model, which is found inside app/Models/ directory:

<?php
 
namespace App\Models;
 
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Laravel\Fortify\TwoFactorAuthenticatable;
use Laravel\Jetstream\HasProfilePhoto;
use Laravel\Sanctum\HasApiTokens;
 
class User extends Authenticatable
{
    use HasApiTokens;
    use HasFactory;
    use HasProfilePhoto;
    use Notifiable;
    use TwoFactorAuthenticatable;
 
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name',
        'email',
        'password',
        'social_id',
        'social_type'
    ];
 
    /**
     * The attributes that should be hidden for arrays.
     *
     * @var array
     */
    protected $hidden = [
        'password',
        'remember_token',
        'two_factor_recovery_codes',
        'two_factor_secret',
    ];
 
    /**
     * The attributes that should be cast to native types.
     *
     * @var array
     */
    protected $casts = [
        'email_verified_at' => 'datetime',
    ];
 
    /**
     * The accessors to append to the model's array form.
     *
     * @var array
     */
    protected $appends = [
        'profile_photo_url',
    ];
}

<?php

namespace App\Models;

use Illuminate\Contracts\Auth\MustVerifyEmail;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Foundation\Auth\User as Authenticatable;

use Illuminate\Notifications\Notifiable;

use Laravel\Fortify\TwoFactorAuthenticatable;

use Laravel\Jetstream\HasProfilePhoto;

use Laravel\Sanctum\HasApiTokens;

class User extends Authenticatable

{

use HasApiTokens;

use HasFactory;

use HasProfilePhoto;

use Notifiable;

use TwoFactorAuthenticatable;

/**

* The attributes that are mass assignable.

* @var array

protected $fillable = [

'name',

'email',

'password',

'social_id',

'social_type'

];

/**

* The attributes that should be hidden for arrays.

* @var array

protected $hidden = [

'password',

'remember_token',

'two_factor_recovery_codes',

'two_factor_secret',

];

/**

* The attributes that should be cast to native types.

* @var array

protected $casts = [

'email_verified_at' => 'datetime',

];

/**

* The accessors to append to the model's array form.

* @var array

protected $appends = [

'profile_photo_url',

];

}

Now, run following command to migrate database schema.

php artisan migrate

1	php artisan migrate

Install Jetstream Auth

In this step, install jetstream laravel auth scaffolding package with livewire. We have provided a complete guide in this Laravel 8 Auth Scaffolding using Jetstream Tutorial.

Build Routes

After this, we need to add following routes in “routes/web.php” file along with a resource route. Lets open “routes/web.php” file and add following route.

routes/web.php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\Auth\FacebookSocialiteController;
 
 
Route::get('auth/facebook', [FacebookSocialiteController::class, 'redirectToFB']);
Route::get('callback/facebook', [FacebookSocialiteController::class, 'handleCallback']);

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\Auth\FacebookSocialiteController;

Route::get('auth/facebook', [FacebookSocialiteController::class, 'redirectToFB']);

Route::get('callback/facebook', [FacebookSocialiteController::class, 'handleCallback']);

Now, lets create a controller for facebook login. Create a controller named FacebookSocialiteController using command given below –

php artisan make:controller FacebookSocialiteController

1	php artisan make:controller FacebookSocialiteController

Once the above command executed, it will create a controller file FacebookSocialiteController.php in app/Http/Controllers/ directory. Open the FacebookSocialiteController.php file and put the following code in it.

app/Http/Controllers/FacebookSocialiteController.php

<?php
   
namespace App\Http\Controllers\Auth;
   
use App\Http\Controllers\Controller;
use Socialite;
use Auth;
use Exception;
use App\Models\User;
   
class FacebookSocialiteController extends Controller
{
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function redirectToFB()
    {
        return Socialite::driver('facebook')->redirect();
    }
       
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function handleCallback()
    {
        try {
     
            $user = Socialite::driver('facebook')->user();
      
            $finduser = User::where('social_id', $user->id)->first();
      
            if($finduser){
      
                Auth::login($finduser);
     
                return redirect('/home');
      
            }else{
                $newUser = User::create([
                    'name' => $user->name,
                    'email' => $user->email,
                    'social_id'=> $user->id,
                    'social_type'=> 'facebook',
                    'password' => encrypt('my-facebook')
                ]);
     
                Auth::login($newUser);
      
                return redirect('/home');
            }
     
        } catch (Exception $e) {
            dd($e->getMessage());
        }
    }
}

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;

use Socialite;

use Auth;

use Exception;

use App\Models\User;

class FacebookSocialiteController extends Controller

{

/**

* Create a new controller instance.

* @return void

public function redirectToFB()

{

return Socialite::driver('facebook')->redirect();

}

/**

* Create a new controller instance.

* @return void

public function handleCallback()

{

try {

$user = Socialite::driver('facebook')->user();

$finduser = User::where('social_id', $user->id)->first();

if($finduser){

Auth::login($finduser);

return redirect('/home');

}else{

$newUser = User::create([

'name' => $user->name,

'email' => $user->email,

'social_id'=> $user->id,

'social_type'=> 'facebook',

'password' => encrypt('my-facebook')

]);

Auth::login($newUser);

return redirect('/home');

}

} catch (Exception $e) {

dd($e->getMessage());

}

Now, we will add facebook login button into login.blade.php file. So, open login.blade.php, which is found inside resources/views/auth/ directory:

<x-guest-layout>
    <x-jet-authentication-card>
        <x-slot name="logo">
            <x-jet-authentication-card-logo />
        </x-slot>
 
        <x-jet-validation-errors class="mb-4" />
 
        @if (session('status'))
            <div class="mb-4 font-medium text-sm text-green-600">
                {{ session('status') }}
            </div>
        @endif
 
        <form method="POST" action="{{ route('login') }}">
            @csrf
 
            <div>
                <x-jet-label value="{{ __('Email') }}" />
                <x-jet-input class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus />
            </div>
 
            <div class="mt-4">
                <x-jet-label value="{{ __('Password') }}" />
                <x-jet-input class="block mt-1 w-full" type="password" name="password" required autocomplete="current-password" />
            </div>
 
            <div class="block mt-4">
                <label class="flex items-center">
                    <input type="checkbox" class="form-checkbox" name="remember">
                    <span class="ml-2 text-sm text-gray-600">{{ __('Remember me') }}</span>
                </label>
            </div>
 
            <div class="flex items-center justify-end mt-4">
                @if (Route::has('password.request'))
                    <a class="underline text-sm text-gray-600 hover:text-gray-900" href="{{ route('password.request') }}">
                        {{ __('Forgot your password?') }}
                    </a>
                @endif
 
                <x-jet-button class="ml-4">
                    {{ __('Login') }}
                </x-jet-button>
 
                <a href="{{ url('auth/faebook') }}" style="margin-top: 0px !important;background: green;color: #ffffff;padding: 5px;border-radius:7px;" class="ml-2">
                  <strong>Facebook Login</strong>
                </a> 
            </div>
        </form>
    </x-jet-authentication-card>
</x-guest-layout>

<x-guest-layout>

<x-jet-authentication-card>

<x-slot name="logo">

<x-jet-authentication-card-logo />

</x-slot>

<x-jet-validation-errors class="mb-4" />

@if (session('status'))

</div>

@endif

@csrf

<div>

<x-jet-label value="{{ __('Email') }}" />

<x-jet-input class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus />

</div>

<x-jet-label value="{{ __('Password') }}" />

<x-jet-input class="block mt-1 w-full" type="password" name="password" required autocomplete="current-password" />

</div>

<span class="ml-2 text-sm text-gray-600">{{ __('Remember me') }}</span>

</label>

</div>

@if (Route::has('password.request'))

</a>

@endif

<x-jet-button class="ml-4">

</x-jet-button>

<strong>Facebook Login</strong>

</a>

</div>

</form>

</x-jet-authentication-card>

</x-guest-layout>

Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

http://localhost:8000/

1	http://localhost:8000/