Category Archives: Laravel

Laravel Tutorials

How to Create Custom Route File in Laravel App

In this How to Create Custom Route File in Laravel App tutorial I’ll show you how to create custom route file in laravel. In this tutorial you will learn to create custom route file in your laravel project. In this step by step tutorial I’ll guide you through the process of creating custom route file in laravel.

Step 1: Install Laravel Fresh Application

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: Create Custom Route File

In this step we will be creating custom route file. Go to appName/routes folder and create custom routes file. And will create custom routes file name students.php.

routes/student.php

<?php
 
 
/*
|--------------------------------------------------------------------------
| User Routes
|--------------------------------------------------------------------------
|
| Here is where you can register user routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "user" middleware group. Now create something great!
|
*/
 
 
Route::get('/', function () {
    dd('Welcome to student routes.');
});

<?php

|--------------------------------------------------------------------------

| User Routes

|--------------------------------------------------------------------------

| Here is where you can register user routes for your application. These

| routes are loaded by the RouteServiceProvider within a group which

| contains the "user" middleware group. Now create something great!

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

dd('Welcome to student routes.');

});

Step 3: Add Files to ServiceProvider

In this step, you need to register your custom routes in Route Service Provider. Go to app/Providers folder and find RouteServiceProvider.php . Open it and register your custom routes file as follow:

<?php
 
 
namespace App\Providers;
 
 
use Illuminate\Support\Facades\Route;
use Illuminate\Foundation\Support\Providers\RouteServiceProvider as ServiceProvider;
 
 
class RouteServiceProvider extends ServiceProvider
{
    /**
     * This namespace is applied to your controller routes.
     *
     * In addition, it is set as the URL generator's root namespace.
     *
     * @var string
     */
    protected $namespace = 'App\Http\Controllers';
 
 
    /**
     * Define your route model bindings, pattern filters, etc.
     *
     * @return void
     */
    public function boot()
    {
        parent::boot();
    }
 
 
    /**
     * Define the routes for the application.
     *
     * @return void
     */
    public function map()
    {
 
 
        $this->mapApiRoutes();
 
 
        $this->mapWebRoutes();
 
         
        $this->mapStudentRoutes();
 
    }
 
     
    /**
     * Define the "web" routes for the application.
     *
     * These routes all receive session state, CSRF protection, etc.
     *
     * @return void
     */
    protected function mapWebRoutes()
    {
        Route::middleware('web')
             ->namespace($this->namespace)
             ->group(base_path('routes/web.php'));
    }
 
 
    /**
     * Define the "api" routes for the application.
     *
     * These routes are typically stateless.
     *
     * @return void
     */
    protected function mapApiRoutes()
    {
        Route::prefix('api')
             ->middleware('api')
             ->namespace($this->namespace)
             ->group(base_path('routes/api.php'));
    }
 
 
    /**
     * Define the "student" routes for the application.
     *
     * These routes are typically stateless.
     *
     * @return void
     */
    protected function mapStudentRoutes()
    {
        Route::prefix('admin')
            ->namespace($this->namespace)
            ->group(base_path('routes/student.php'));
    }
 
 
 
}

100

101

<?php

namespace App\Providers;

use Illuminate\Support\Facades\Route;

use Illuminate\Foundation\Support\Providers\RouteServiceProvider as ServiceProvider;

class RouteServiceProvider extends ServiceProvider

{

/**

* This namespace is applied to your controller routes.

* In addition, it is set as the URL generator's root namespace.

* @var string

protected $namespace = 'App\Http\Controllers';

/**

* Define your route model bindings, pattern filters, etc.

* @return void

public function boot()

{

parent::boot();

}

/**

* Define the routes for the application.

* @return void

public function map()

{

$this->mapApiRoutes();

$this->mapWebRoutes();

$this->mapStudentRoutes();

}

/**

* Define the "web" routes for the application.

* These routes all receive session state, CSRF protection, etc.

* @return void

protected function mapWebRoutes()

{

Route::middleware('web')

->namespace($this->namespace)

->group(base_path('routes/web.php'));

}

/**

* Define the "api" routes for the application.

* These routes are typically stateless.

* @return void

protected function mapApiRoutes()

{

Route::prefix('api')

->middleware('api')

->namespace($this->namespace)

->group(base_path('routes/api.php'));

}

/**

* Define the "student" routes for the application.

* These routes are typically stateless.

* @return void

protected function mapStudentRoutes()

{

Route::prefix('admin')

->namespace($this->namespace)

->group(base_path('routes/student.php'));

}

Now you can add your routes in student.php route file and use it as follow:

 http://localhost:8000/student/*

1	http://localhost:8000/student/*

Laravel 7 Vue JS CRUD Example Tutorial

In this Laravel 7 Vue JS CRUD Example Tutorial, I’ll show you how to create simple crud application using Vue Js in laravel. In this tutorial you will learn to create basic crud application with Vue Js in laravel. In this step by step tutorial I’ll demonstrate the implementation of simple crud application using Vue Js in laravel.

Laravel 7 Vue JS CRUD Example Tutorial

Download Laravel Apps
Configure Database Details
Install NPM Dependencies
Create Migration, Model and Controller
Define Routes In web.php
Create Vue Js App
Create Vue Js Components For Crud App
Define Vue Js Routes For Crud App
Include Vue Js Dependencies to app.js
Run Development Server

Step 1: Download Laravel Apps

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 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: Install NPM Dependencies

npm install

1	npm install

Next, install vue-router and vue-axios. vue-axios will be used for calling Laravel API. Run the following command on your command prompt:

npm install vue-router vue-axios --save

1	npm install vue-router vue-axios --save

After installing all dependencies run this command:

npm run watch

1	npm run watch

Step 4: Create Migration, Model and Controller

Now, in this step we will create model and migration file along with controller file. Please run the following command:

php artisan make:model Post -mcr

1	php artisan make:model Post -mcr

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

public function up()
{
    Schema::create('posts', function (Blueprint $table) {
        $table->bigIncrements('id');
        $table->string('title');
        $table->text('description');
        $table->timestamps();
    });
}

public function up()

{

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

$table->bigIncrements('id');

$table->string('title');

$table->text('description');

$table->timestamps();

});

}

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

php artisan migrate

1	php artisan migrate

Now, Open Post.php model from app folder and update this code into Post.php model:

<?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'];

}

Next open PostController and define index, add, edit, delete methods in PostController file. So Go to app>Http>Controllers folder and open PostController.php file. Then update the following method into this:

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use App\Http\Resources\PostCollection;
use App\Post;
 
class PostController extends Controller
{
    // all posts
    public function index()
    {
        $posts = Post::all()->toArray();
        return array_reverse($posts);
    }
 
    // add post
    public function add(Request $request)
    {
        $post = new Post([
            'title' => $request->input('title'),
            'description' => $request->input('description')
        ]);
        $post->save();
 
        return response()->json('The post successfully added');
    }
 
    // edit post
    public function edit($id)
    {
        $post = Post::find($id);
        return response()->json($post);
    }
 
    // update post
    public function update($id, Request $request)
    {
        $post = Post::find($id);
        $post->update($request->all());
 
        return response()->json('The post successfully updated');
    }
 
    // delete post
    public function delete($id)
    {
        $post = Post::find($id);
        $post->delete();
 
        return response()->json('The post successfully deleted');
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Resources\PostCollection;

use App\Post;

class PostController extends Controller

{

// all posts

public function index()

{

$posts = Post::all()->toArray();

return array_reverse($posts);

}

// add post

public function add(Request $request)

{

$post = new Post([

'title' => $request->input('title'),

'description' => $request->input('description')

]);

$post->save();

return response()->json('The post successfully added');

}

// edit post

public function edit($id)

{

$post = Post::find($id);

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

}

// update post

public function update($id, Request $request)

{

$post = Post::find($id);

$post->update($request->all());

return response()->json('The post successfully updated');

}

// delete post

public function delete($id)

{

$post = Post::find($id);

$post->delete();

return response()->json('The post successfully deleted');

}

Step 5: Define Routes in Web.php

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

<?php
 
Route::get('{any}', function () {
    return view('app');
})->where('any', '.*');

<?php

Route::get('{any}', function () {

return view('app');

})->where('any', '.*');

Routes/Api.php

<?php
 
use Illuminate\Http\Request;
 
 
Route::get('posts', 'PostController@index');
Route::group(['prefix' => 'post'], function () {
    Route::post('add', 'PostController@add');
    Route::get('edit/{id}', 'PostController@edit');
    Route::post('update/{id}', 'PostController@update');
    Route::delete('delete/{id}', 'PostController@delete');
});

<?php

use Illuminate\Http\Request;

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

Route::group(['prefix' => 'post'], function () {

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

Route::get('edit/{id}', 'PostController@edit');

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

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

});

Step 6: Create Vue Js App

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>Laravel Vue JS CRUD Example  - w3adda</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"/>
    <style>
        .bg-light {
            background-color: #eae9e9 !important;
        }
    </style>
</head>
<body>
<div id="app">
</div>
<script src="{{ mix('js/app.js') }}" type="text/javascript"></script>
</body>
</html>

<!doctype html>

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

<head>

<title>Laravel Vue JS CRUD Example - w3adda</title>

<style>

.bg-light {

background-color: #eae9e9 !important;

}

</style>

</head>

<body>

</div>

</body>

</html>

Step 7: Create Vue Js Components For Crud App

In this step, go to resources>js folder and create the following vue js component files:

App.vue
AllPost.vue
AddPost.vue
EditPost.vue

App.vue is the main Vue file. We will define router- view in the file. So all route pages will be shown in the App.vue file

Open App.vue file and update the following code into your file:

<template>
    <div class="container">
        <div class="text-center" style="margin: 20px 0px 20px 0px;">
            <span class="text-secondary">Laravel Vue CRUD Example</span>
        </div>
 
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="collapse navbar-collapse">
                <div class="navbar-nav">
                    <router-link to="/" class="nav-item nav-link">Home</router-link>
                    <router-link to="/add" class="nav-item nav-link">Add Post</router-link>
                </div>
            </div>
        </nav>
        <br/>
        <router-view></router-view>
    </div>
</template>
 
<script>
    export default {}
</script>

<span class="text-secondary">Laravel Vue CRUD Example</span>

</div>

<router-link to="/" class="nav-item nav-link">Home</router-link>

<router-link to="/add" class="nav-item nav-link">Add Post</router-link>

</div>

</nav>

<br/>

<router-view></router-view>

</div>

</template>

export default {}

</script>

Next, Open AllPost.vue file and update the following code into your file:

<template>
    <div>
        <h3 class="text-center">All Posts</h3><br/>
 
        <table class="table table-bordered">
            <thead>
            <tr>
                <th>ID</th>
                <th>Title</th>
                <th>Description</th>
                <th>Created At</th>
                <th>Updated At</th>
                <th>Actions</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="post in posts" :key="post.id">
                <td>{{ post.id }}</td>
                <td>{{ post.title }}</td>
                <td>{{ post.description }}</td>
                <td>{{ post.created_at }}</td>
                <td>{{ post.updated_at }}</td>
                <td>
                    <div class="btn-group" role="group">
                        <router-link :to="{name: 'edit', params: { id: post.id }}" class="btn btn-primary">Edit
                        </router-link>
                        <button class="btn btn-danger" @click="deletePost(post.id)">Delete</button>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</template>
 
<script>
    export default {
        data() {
            return {
                posts: []
            }
        },
        created() {
            this.axios
                .get('http://localhost:8000/api/posts')
                .then(response => {
                    this.posts = response.data;
                });
        },
        methods: {
            deletePost(id) {
                this.axios
                    .delete(`http://localhost:8000/api/post/delete/${id}`)
                    .then(response => {
                        let i = this.posts.map(item => item.id).indexOf(id); // find index of your object
                        this.posts.splice(i, 1)
                    });
            }
        }
    }
</script>

<div>

<h3 class="text-center">All Posts</h3><br/>

<thead>

<tr>

<th>Title</th>

<th>Description</th>

<th>Created At</th>

<th>Updated At</th>

<th>Actions</th>

</tr>

</thead>

<tbody>

<td>{{ post.title }}</td>

<td>{{ post.description }}</td>

<td>{{ post.created_at }}</td>

<td>{{ post.updated_at }}</td>

<td>

<router-link :to="{name: 'edit', params: { id: post.id }}" class="btn btn-primary">Edit

</router-link>

<button class="btn btn-danger" @click="deletePost(post.id)">Delete</button>

</div>

</td>

</tr>

</tbody>

</table>

</div>

</template>

export default {

data() {

return {

posts: []

}

created() {

this.axios

.get('http://localhost:8000/api/posts')

.then(response => {

this.posts = response.data;

});

methods: {

deletePost(id) {

this.axios

.delete(`http://localhost:8000/api/post/delete/${id}`)

.then(response => {

let i = this.posts.map(item => item.id).indexOf(id); // find index of your object

this.posts.splice(i, 1)

});

}

</script>

Next, Open AddPost.vue file and update the following code into your file:

<template>
    <div>
        <h3 class="text-center">Add Post</h3>
        <div class="row">
            <div class="col-md-6">
                <form @submit.prevent="addPost">
                    <div class="form-group">
                        <label>Title</label>
                        <input type="text" class="form-control" v-model="post.title">
                    </div>
                    <div class="form-group">
                        <label>Description</label>
                        <input type="text" class="form-control" v-model="post.description">
                    </div>
                    <button type="submit" class="btn btn-primary">Add Post</button>
                </form>
            </div>
        </div>
    </div>
</template>
 
<script>
    export default {
        data() {
            return {
                post: {}
            }
        },
        methods: {
            addPost() {
 
                this.axios
                    .post('http://localhost:8000/api/post/add', this.post)
                    .then(response => (
                        this.$router.push({name: 'home'})
                        // console.log(response.data)
                    ))
                    .catch(error => console.log(error))
                    .finally(() => this.loading = false)
            }
        }
    }
</script>

<div>

<label>Title</label>

</div>

<label>Description</label>

</div>

</form>

</div>

</template>

export default {

data() {

return {

post: {}

}

methods: {

addPost() {

this.axios

.post('http://localhost:8000/api/post/add', this.post)

.then(response => (

this.$router.push({name: 'home'})

// console.log(response.data)

))

.catch(error => console.log(error))

.finally(() => this.loading = false)

}

</script>

Next, Open EditPost.vue file and update the following code into your file:

<template>
    <div>
        <h3 class="text-center">Edit Post</h3>
        <div class="row">
            <div class="col-md-6">
                <form @submit.prevent="updatePost">
                    <div class="form-group">
                        <label>Title</label>
                        <input type="text" class="form-control" v-model="post.title">
                    </div>
                    <div class="form-group">
                        <label>Description</label>
                        <input type="text" class="form-control" v-model="post.description">
                    </div>
                    <button type="submit" class="btn btn-primary">Update Post</button>
                </form>
            </div>
        </div>
    </div>
</template>
 
<script>
    export default {
        data() {
            return {
                post: {}
            }
        },
        created() {
            this.axios
                .get(`http://localhost:8000/api/post/edit/${this.$route.params.id}`)
                .then((response) => {
                    this.post = response.data;
                    // console.log(response.data);
                });
        },
        methods: {
            updatePost() {
                this.axios
                    .post(`http://localhost:8000/api/post/update/${this.$route.params.id}`, this.post)
                    .then((response) => {
                        this.$router.push({name: 'home'});
                    });
            }
        }
    }
</script>

<div>

<label>Title</label>

</div>

<label>Description</label>

</div>

<button type="submit" class="btn btn-primary">Update Post</button>

</form>

</div>

</template>

export default {

data() {

return {

post: {}

}

created() {

this.axios

.get(`http://localhost:8000/api/post/edit/${this.$route.params.id}`)

.then((response) => {

this.post = response.data;

// console.log(response.data);

});

methods: {

updatePost() {

this.axios

.post(`http://localhost:8000/api/post/update/${this.$route.params.id}`, this.post)

.then((response) => {

this.$router.push({name: 'home'});

});

}

</script>

Step 8: Define Vue Js Routes For Crud App

In this step you need to define vue routes. Lets Go to resources>js folder, create a file named routes.js and update the following routes into your routes.js file:

import AllPosts from './components/AllPosts.vue';
import AddPost from './components/AddPost.vue';
import EditPost from './components/EditPost.vue';
 
export const routes = [
    {
        name: 'home',
        path: '/',
        component: AllPosts
    },
    {
        name: 'add',
        path: '/add',
        component: AddPost
    },
    {
        name: 'edit',
        path: '/edit/:id',
        component: EditPost
    }
];

import AllPosts from './components/AllPosts.vue';

import AddPost from './components/AddPost.vue';

import EditPost from './components/EditPost.vue';

export const routes = [

{

path: '/',

component: AllPosts

{

path: '/add',

component: AddPost

{

path: '/edit/:id',

component: EditPost

}

];

Step 9: Include Vue Js Dependencies to app.js

Now, you need to add all routes, vue axios and other dependencies etc. So Go to resources>js folder and open app.js. Then update the following code into your app.js file:Now, you need to add all routes, vue axios and other dependencies etc. So Go to resources>js folder and open app.js. Then update the following code into your app.js file:

require('./bootstrap');
window.Vue = require('vue');
 
import App from './App.vue';
import VueRouter from 'vue-router';
import VueAxios from 'vue-axios';
import axios from 'axios';
import {routes} from './routes';
 
Vue.use(VueRouter);
Vue.use(VueAxios, axios);
 
const router = new VueRouter({
    mode: 'history',
    routes: routes
});
 
const app = new Vue({
    el: '#app',
    router: router,
    render: h => h(App),
});

require('./bootstrap');

window.Vue = require('vue');

import App from './App.vue';

import VueRouter from 'vue-router';

import VueAxios from 'vue-axios';

import axios from 'axios';

import {routes} from './routes';

Vue.use(VueRouter);

Vue.use(VueAxios, axios);

const router = new VueRouter({

mode: 'history',

routes: routes

});

const app = new Vue({

el: '#app',

router: router,

render: h => h(App),

});

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 watch

1	npm run watch

Laravel 7 Generate PDF with Graph

In this Laravel 7 Generate PDF with Graph tutorial, I’ll show you how to generate pdf with graph in laravel. In this tutorial you will learn to generate pdf file with graph in laravel.

Laravel 7 Generate PDF with Graph

Step 1: Install wkhtmltopdf Software
Step 2: Download Laravel Fresh App
Step 3: Install mikehaertl/phpwkhtmltopdf
Step 4: Add Routes
Step 5: Create Controller by Command
Step 6: Create Blade View
Step 7: Run Development Server

Step 1: Install wkhtmltopdf Software

In thi step we will first install wkhtmltopdf software. Follow the instruction given below to install:

For Ubuntu:

sudo apt install wkhtmltopdf

1	sudo apt install wkhtmltopdf

for Windows:

You have go the following link and download exe. Then install it:

https://wkhtmltopdf.org/

1	https://wkhtmltopdf.org/

https://wkhtmltopdf.org/

1	https://wkhtmltopdf.org/

Step 2: 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 3: Install mikehaertl/phpwkhtmltopdf

In this step, we will install mikehaertl/phpwkhtmltopdf Package via the composer dependency manager. Use the following command to install mikehaertl/phpwkhtmltopdf Package.

composer require mikehaertl/phpwkhtmltopdf

1	composer require mikehaertl/phpwkhtmltopdf

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('graph', 'GraphPdfController@index');
Route::get('download', 'GraphPdfController@download')->name('download');

1 2	Route::get('graph', 'GraphPdfController@index'); Route::get('download', 'GraphPdfController@download')->name('download');

Step 5: Create Controller by Command

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

php artisan make:controller GraphPdfController

1	php artisan make:controller GraphPdfController

This command will create a controller that name GraphPdfController.php.

Next go to app/Http/Controllers and open GraphPdfController.php. Then update the following methods into your controller file:

<?php
   
namespace App\Http\Controllers;
   
use Illuminate\Http\Request;
use mikehaertl\wkhtmlto\Pdf;
   
class GraphPdfController extends Controller
{
    /**
     * Write code on Construct
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('graph');
    }
   
    /**
     * Write code on Construct
     *
     * @return \Illuminate\Http\Response
     */
    public function download()
    {
        $render = view('chart')->render();
   
        $pdf = new Pdf;
        $pdf->addPage($render);
        $pdf->setOptions(['javascript-delay' => 5000]);
        $pdf->saveAs(public_path('report.pdf'));
    
        return response()->download(public_path('report.pdf'));
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use mikehaertl\wkhtmlto\Pdf;

class GraphPdfController extends Controller

{

/**

* Write code on Construct

* @return \Illuminate\Http\Response

public function index()

{

return view('graph');

}

/**

* Write code on Construct

* @return \Illuminate\Http\Response

public function download()

{

$render = view('chart')->render();

$pdf = new Pdf;

$pdf->addPage($render);

$pdf->setOptions(['javascript-delay' => 5000]);

$pdf->saveAs(public_path('report.pdf'));

return response()->download(public_path('report.pdf'));

}

Step 6: Create View File

Go to resources/views/ folder and create a new blade view file that name graph.blade.php file.

After that, update the following code into your graph.blade.php file:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://www.google.com/jsapi"></script>
    <style>
        .pie-chart {
            width: 600px;
            height: 400px;
            margin: 0 auto;
        }
        .text-center{
            text-align: center;
        }
    </style>
</head>
<body>
   
<h2 class="text-center">Generate PDF with Chart in Laravel</h2>
   
<div id="chartDiv" class="pie-chart"></div>
   
<div class="text-center">
    <a href="{{ route('download') }}">Download PDF File</a>
    <h2>w3adda.com.com</h2>
</div>
   
<script type="text/javascript">
    window.onload = function() {
        google.load("visualization", "1.1", {
            packages: ["corechart"],
            callback: 'drawChart'
        });
    };
   
    function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Pizza');
        data.addColumn('number', 'Populartiy');
        data.addRows([
            ['Laravel', 33],
            ['Codeigniter', 26],
            ['Symfony', 22],
            ['CakePHP', 10],
            ['Slim', 9]
        ]);
   
        var options = {
            title: 'Popularity of Types of Framework',
            sliceVisibilityThreshold: .2
        };
   
        var chart = new google.visualization.PieChart(document.getElementById('chartDiv'));
        chart.draw(data, options);
    }
</script>
   
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

.pie-chart {

width: 600px;

height: 400px;

margin: 0 auto;

}

.text-center{

text-align: center;

}

</style>

</head>

<body>

<h2 class="text-center">Generate PDF with Chart in Laravel</h2>

<a href="{{ route('download') }}">Download PDF File</a>

</div>

window.onload = function() {

google.load("visualization", "1.1", {

packages: ["corechart"],

callback: 'drawChart'

});

};

function drawChart() {

var data = new google.visualization.DataTable();

data.addColumn('string', 'Pizza');

data.addColumn('number', 'Populartiy');

data.addRows([

['Laravel', 33],

['Codeigniter', 26],

['Symfony', 22],

['CakePHP', 10],

['Slim', 9]

]);

var options = {

title: 'Popularity of Types of Framework',

sliceVisibilityThreshold: .2

};

var chart = new google.visualization.PieChart(document.getElementById('chartDiv'));

chart.draw(data, options);

}

</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://127.0.0.1:8000/graph

1	http://127.0.0.1:8000/graph

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