Category Archives: Laravel

Laravel Tutorials

Laravel Dynamic Ajax Dependent Dropdown

In this Laravel dynamic dependent dropdown using ajax jquery tutorial I’ll show you how to create dynamic dependent dropdown using jquery ajax in laravel. In this tutorial you will learn to create ajax dynamic dependent dropdown using jquery ajax. In this article I’ll demonstrate how to show selected subcategories dependent dropdown on selected category dropdown using jquery ajax in laravel.

Step 1: Install Laravel New App
Step 2: Add Database Details
Step 3: Create Model and Migration
Step 4: Add Routes
Step 5: Create Controllers By Artisan
Step 6: Create Blade Views
Step 7: Run Development Server

Step 1: Install Laravel New 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=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

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

php artisan make:model Category -m

1	php artisan make:model Category -m

Navigate database/migrations/ and open create_categorys_table.php file. Then update the following code into this file:

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateCategoriesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('categories', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->unsignedInteger('parent_id')->nullable();
            $table->timestamps();
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('categories');
    }
}

use Illuminate\Database\Migrations\Migration;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;

class CreateCategoriesTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

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

$table->id();

$table->string('name');

$table->unsignedInteger('parent_id')->nullable();

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('categories');

}

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

php artisan migrate

1	php artisan migrate

Next navigate to app and open Category.php model file. Then update the following code into your app/Category.php file as follow:

namespace App;
use Illuminate\Database\Eloquent\Model;
class Category extends Model
{
    protected $guarded = [];
    public function subcategories(){
        return $this->hasMany('App\Category', 'parent_id');
    }
}

namespace App;

use Illuminate\Database\Eloquent\Model;

class Category extends Model

{

protected $guarded = [];

public function subcategories(){

return $this->hasMany('App\Category', 'parent_id');

}

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('cat', 'CategoryController@index');
Route::post('subcat', 'CategoryController@subCat');

1 2	Route::get('cat', 'CategoryController@index'); Route::post('subcat', 'CategoryController@subCat');

Step 5: Create Controllers by Artisan

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

php artisan make:controller CategoryController

1	php artisan make:controller CategoryController

This command will create CategoryController by the artisan command.

Now, go to app/http/controller and open CategoryController.php.Then put the following methods into your controller file:

<?php
namespace App\Http\Controllers;
use App\Category;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
class CategoryController extends Controller
{
    public function index(Request $request)
    {
          
      $categoris = Category::where('parent_id',0)->get();
     
      return view('category',["categoris" => $categoris]);
    }    
    public function subCat(Request $request)
    {
         
        $parent_id = $request->cat_id;
         
        $subcategories = Category::where('id',$parent_id)
                              ->with('subcategories')
                              ->get();
        return response()->json([
            'subcategories' => $subcategories
        ]);
    }
}

<?php

namespace App\Http\Controllers;

use App\Category;

use Illuminate\Http\Request;

use Illuminate\Support\Facades\Route;

class CategoryController extends Controller

{

public function index(Request $request)

{

$categoris = Category::where('parent_id',0)->get();

return view('category',["categoris" => $categoris]);

}

public function subCat(Request $request)

{

$parent_id = $request->cat_id;

$subcategories = Category::where('id',$parent_id)

->with('subcategories')

->get();

return response()->json([

'subcategories' => $subcategories

]);

}

Step 6: Create Blade Views

In this step, you need to create one blade views file for rendering data on it. So navigate to resources/views folder and create the blade view as following:

Create first file name category.blade.php and update the following code into it:

<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel, jquery ajax categories and subcategories, select dropdown</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<meta name="csrf-token" content="{{ csrf_token() }}" />
</head>
<body>
<div class="container" style="margin-top: 50px; margin-left: 300px">
<div class="row">
<div class="col-lg-6">
<form action="">
<h4>Category</h4>
<select class="browser-default custom-select" name="category" id="category">
<option selected>Select category</option>
@foreach ($categoris as $item)
<option value="{{ $item->id }}">{{ $item->name }}</option>
@endforeach
</select>
<h4>Subcategory</h4>
<select class="browser-default custom-select" name="subcategory" id="subcategory">
</select>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$(document).ready(function () {
$('#category').on('change',function(e) {
var cat_id = e.target.value;
$.ajax({
url:"{{ route('subcat') }}",
type:"POST",
data: {
cat_id: cat_id
},
success:function (data) {
$('#subcategory').empty();
$.each(data.subcategories[0].subcategories,function(index,subcategory){
$('#subcategory').append('<option value="'+subcategory.id+'">'+subcategory.name+'</option>');
})
}
})
});
});
</script>
</body>
</html>

<html lang="{{ app()->getLocale() }}">

<head>

<title>Laravel, jquery ajax categories and subcategories, select dropdown</title>

</head>

<body>

<h4>Category</h4>

<option selected>Select category</option>

@foreach ($categoris as $item)

@endforeach

</select>

<h4>Subcategory</h4>

</select>

</form>

</div>

$.ajaxSetup({

headers: {

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

}

});

$(document).ready(function () {

$('#category').on('change',function(e) {

var cat_id = e.target.value;

$.ajax({

url:"{{ route('subcat') }}",

type:"POST",

data: {

cat_id: cat_id

success:function (data) {

$('#subcategory').empty();

$.each(data.subcategories[0].subcategories,function(index,subcategory){

$('#subcategory').append('<option value="'+subcategory.id+'">'+subcategory.name+'</option>');

})

}

})

});

</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/cat

1	http://localhost:8000/cat

Laravel 7 Vue JS Full Calendar Example

In this Laravel Vue js fullcalendar example tutorial I’ll show you how to display events on the calendar using vue js fullcalendar components in laravel apps. In this tutorial you will learn to display events on the calendar using vue js fullcalendar in laravel. This tutorial you will also learn to show dynamic event data on vue js calendar using Vue full calendar components in laravel vue js.

Laravel 7 Vue JS Full Calendar Example

Step 1: Download Laravel Fresh App
Step 2: Add Database Detail
Step 3: Create Model And Migration
Step 4: NPM Module Configuration For Vue Js
Step 5: Add Routes
Step 6: Create Controller By Command
Step 7: Create Vue Component
Step 8: Create Blade Views And Initialize Vue Components
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. Please run the following command:

php artisan make:model Event -m

1	php artisan make:model Event -m

The above command will create one model name Event.php and also create one migration file for the events table. Now open create_events_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 CreateEventsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
       Schema::create('events', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('title');
            $table->date('start');
            $table->date('end');
            $table->timestamps();
      });
    }
 
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('events');
    }
}

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreateEventsTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

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

$table->bigIncrements('id');

$table->string('title');

$table->date('start');

$table->date('end');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('events');

}

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

php artisan migrate

1	php artisan migrate

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

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

namespace App;

use Illuminate\Database\Eloquent\Model;

class Event extends Model

{

protected $guarded = [];

}

Step 4: NPM Module Configuration For Vue Js

php artisan preset vue

1	php artisan preset vue

Install all Vue dependencies:

npm install

1	npm install

After that, install vue full calendar dependencies by using the below command:

npm install --save vue-full-calendar
 
 
npm install --save babel-runtime
 
 
npm install babel-preset-stage-2 --save-dev
 
 
npm install moment --save

npm install --save vue-full-calendar

npm install --save babel-runtime

npm install babel-preset-stage-2 --save-dev

npm install moment --save

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 events
Route::get('events','EventController@index');

1 2	//all events Route::get('events','EventController@index');

Step 6: Create Controller By Command

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

php artisan make:controller EventController

1	php artisan make:controller EventController

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

namespace App\Http\Controllers;
 
use App\Event;
use Illuminate\Http\Request;
 
class EventController extends Controller
{
    public function index(Request $request)
    {
        $events = Event::get(['title','start']);
        return response()->json(["events" => $events]);
    }
 
}

namespace App\Http\Controllers;

use App\Event;

use Illuminate\Http\Request;

class EventController extends Controller

{

public function index(Request $request)

{

$events = Event::get(['title','start']);

return response()->json(["events" => $events]);

}

Step 7: Create Vue Component

Now, go to resources/assets/js/components directory and create a file called FullCalendarComponent.vue.

Now, put the following code into your FullCalendarComponent.vue components file:

<template>
<div class="container">
       <full-calendar :event-sources="eventSources"></full-calendar>
       </div>
</template>
<script>
    export default{
  data() {
    return {
      eventSources: [
        {
          events(start, end, timezone, callback) {
            axios.get('http://localhost:8000/events').then(response => {
              callback(response.data.events)
            })
          },
          color: 'yellow',
          textColor: 'black',
        }
      ]
    }
  }
    }
</script>

<full-calendar :event-sources="eventSources"></full-calendar>

</div>

</template>

export default{

data() {

return {

eventSources: [

{

events(start, end, timezone, callback) {

axios.get('http://localhost:8000/events').then(response => {

callback(response.data.events)

})

color: 'yellow',

textColor: 'black',

}

]

}

</script>

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

require('./bootstrap');
 
import 'fullcalendar/dist/fullcalendar.css';
 
window.Vue = require('vue');
 
import FullCalendar from 'vue-full-calendar'; //Import Full-calendar
 
Vue.use(FullCalendar);
 
 
Vue.component('fullcalendar-component', require('./components/FullCalendarComponent.vue').default);
 
const app = new Vue({
    el: '#app',
});

require('./bootstrap');

import 'fullcalendar/dist/fullcalendar.css';

window.Vue = require('vue');

import FullCalendar from 'vue-full-calendar'; //Import Full-calendar

Vue.use(FullCalendar);

Vue.component('fullcalendar-component', require('./components/FullCalendarComponent.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 FullCalendar 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 FullCalendar Example</title>

@stack('fontawesome')

</head>

<body>

@yield('content')

</main>

</div>

</body>

</html>

Next, 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 FullCalendar Example</div>
                     
                <div class="card-body">
                  <fullcalendar-component></fullcalendar-component>
                </div>
                 
            </div>
        </div>
    </div>
</div>
@endsection

@extends('layouts.app')

@section('content')

<div class="card-header">Laravel Vue JS FullCalendar Example</div>

<fullcalendar-component></fullcalendar-component>

</div>

@endsection

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 Owl Carousel Slider Example

In this Laravel 7 Vue JS Owl Carousel Slider Example tutorial, I’ll show you how to implement Owl carousel slider with Vue Js in laravel. In this tutorial you will learn to create Owl carousel slider with Vue Js in laravel. With Owl carousel you can create image slider in laravel project.

Laravel 7 Vue JS Owl Carousel Slider Example

Step 1: Download Laravel Fresh App
Step 2: Add Database Detail
Step 3: Create Model And Migration
Step 4: NPM Module Configuration For Vue Js
Step 5: Add Routes
Step 6: Create Controller By Command
Step 7: Create Vue Component
Step 8: Create Blade Views And Initialize Vue Components
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. Please run the following command:

php artisan make:model Slider -m

1	php artisan make:model Slider -m

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

Now open create_sliders_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 CreateSlidersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
       Schema::create('sliders', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('title');
            $table->string('path');
            $table->timestamps();
      });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('sliders');
    }
}

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreateSlidersTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

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

$table->bigIncrements('id');

$table->string('title');

$table->string('path');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('sliders');

}

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

php artisan migrate

1	php artisan migrate

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

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

namespace App;

use Illuminate\Database\Eloquent\Model;

class Slider extends Model

{

protected $guarded = [];

}

Step 4: NPM Module Configuration For Vue Js

php artisan preset vue

1	php artisan preset vue

Install all Vue dependencies:

npm install

1	npm install

Now, we will install owl carousel dependencies by using the below command:

npm i -s vue-owl-carousel

1	npm i -s vue-owl-carousel

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 slider images
Route::get('slider','PostController@index');

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

Step 6: Create Controller By Command

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

php artisan make:controller SliderController

1	php artisan make:controller SliderController

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

namespace App\Http\Controllers;
use App\Slider;
use Illuminate\Http\Request;
class SliderController extends Controller
{
    public function index(Request $request)
    {
        $sliderImg = Slider::get();
        return response()->json($sliderImg);
         
    }
}

namespace App\Http\Controllers;

use App\Slider;

use Illuminate\Http\Request;

class SliderController extends Controller

{

public function index(Request $request)

{

$sliderImg = Slider::get();

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

}

Step 7: Create Vue Component

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

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

<template>
    <div class="container">
        <div class="row justify-content-center">
          <div class="col-md-8">
               <carousel>
                <img class="img-fluid" v-for="(img, index) in images" :src="img.path" :key="index">
               </carousel>
          </div>
        </div>
    </div>
</template>
<script>
import carousel from "vue-owl-carousel";
export default {
  components: {
    carousel
  },
  name: "Owl Carousel",
  props: {
    msg: String
  },
  data() {
      return {
          images: []
      }
  },
  created() {
      this.axios
          .get('http://localhost:8000/slider')
          .then(response => {
              this.images = response.data;
          });
  }
};
</script>

</carousel>

</div>

</template>

import carousel from "vue-owl-carousel";

export default {

components: {

carousel

name: "Owl Carousel",

props: {

msg: String

data() {

return {

images: []

}

created() {

this.axios

.get('http://localhost:8000/slider')

.then(response => {

this.images = response.data;

});

}

};

</script>

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

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

require('./bootstrap');

window.Vue = require('vue');

Vue.component('slider-component', require('./components/SliderComponent.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.

Now, go to resources/views/layouts and open app.blade.php file. Then put 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 Owl Carousel Slider 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 Owl Carousel Slider Example</title>

@stack('fontawesome')

</head>

<body>

@yield('content')

</main>

</div>

</body>

</html>

Next, 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 Owl Carousel Slider Example</div>
                     
                <div class="card-body">
                  <slider-component></slider-component>
                </div>
                 
            </div>
        </div>
    </div>
</div>
@endsection

@extends('layouts.app')

@section('content')

<div class="card-header">Laravel Vue JS Owl Carousel Slider Example</div>

<slider-component></slider-component>

</div>

@endsection

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 Live Search Example Tutorial

In this Laravel 7 Vue JS Live Search Example Tutorial, I’ll show you how to implement live search with Vue Js In laravel. In this tutorial you will learn to implement live search with Vue Js in laravel application.

Laravel 7 Vue JS Live Search Example Tutorial

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

In this step we will setup laravel default auth using following 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. 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->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->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:

<?php
 
use Faker\Generator as Faker;
 
use App\Post;
 
$factory->define(Post::class, function (Faker $faker) {
    return [
       'title' => $faker->sentence,
       'slug' => \Str::slug($faker->sentence),
       'user_id' => 1
    ];
});

<?php

use Faker\Generator as Faker;

use App\Post;

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

return [

'title' => $faker->sentence,

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

'user_id' => 1

];

});

and then run the following command 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

Now we will configure NPM using following command:

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

//search
Route::get('search','PostController@index');
Route::get('res-search','PostController@search');

//search

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

Route::get('res-search','PostController@search');

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()
    {   
        return view('search');
    }
    public function search(Request $request)
    {
        $posts=Post::where('title',$request->keywords)->get();
        return response()->json($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()

{

return view('search');

}

public function search(Request $request)

{

$posts=Post::where('title',$request->keywords)->get();

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

}

Step 8: Create Vue Component

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

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

<template>
    <div>
        <input type="text" v-model="keywords">
        <ul v-if="results.length > 0">
            <li v-for="result in results" :key="result.id" v-text="result.name"></li>
        </ul>
    </div>
</template>
<script>
export default {
    data() {
        return {
            keywords: null,
            results: []
        };
    },
    watch: {
        keywords(after, before) {
            this.fetch();
        }
    },
    methods: {
        fetch() {
            axios.get('/res-search', { params: { keywords: this.keywords } })
                .then(response => this.results = response.data)
                .catch(error => {});
        }
    }
}
</script>

<div>

</ul>

</div>

</template>

export default {

data() {

return {

keywords: null,

results: []

};

watch: {

keywords(after, before) {

this.fetch();

}

methods: {

fetch() {

axios.get('/res-search', { params: { keywords: this.keywords } })

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

.catch(error => {});

}

</script>

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

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

require('./bootstrap');

window.Vue = require('vue');

Vue.component('search-component', require('./components/SearchComponent.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 Live Search 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 Live Search Example Tutorial</title>

@stack('fontawesome')

</head>

<body>

@yield('content')

</main>

</div>

</body>

</html>

Next, Navigate to resources/views/ and create one file name search.blade.php. Then update the following code into your search.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 Live Search</div>
                     
                <div class="card-body">
                  <search-component></search-component>
                </div>
                 
            </div>
        </div>
    </div>
</div>
@endsection

@extends('layouts.app')

@section('content')

<div class="card-header">Laravel Vue Js Live Search</div>

<search-component></search-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 Database Backup Example Tutorial

In this laravel database backup tutorial, I’ll show you how to take backup of database in laravel apps. In tutorial you will learn to take database backup in laravel application. This tutorial will help you step by step to take database backup daily, hourly, weekly, and monthly in laravel apps using the database package.

Laravel 7 Database Backup Example Tutorial

Step 1: Install Package

cd /project directory

Then

composer require spatie/laravel-backup

cd /project directory

Then

composer require spatie/laravel-backup

Step 2: Add ServiceProvider

Next step, Navigate to config/app.php file. And then add service provider as follow:

'providers' => [	....	Spatie\Backup\BackupServiceProvider::class,]

1	'providers' => [ .... Spatie\Backup\BackupServiceProvider::class,]

Step 3: Publish Vendor Of Package

php artisan vendor:publish --provider="Spatie\Backup\BackupServiceProvider"

1	php artisan vendor:publish --provider="Spatie\Backup\BackupServiceProvider"

Note that, Navigate to app/config/laravel-backup.php, and change configuration details.

Step 4: Backup With Command

Now run the command given below to download database backup into storage/app/backupfile:

php artisan backup:run

1	php artisan backup:run

Go to storage/app/backupfile in your storage directory.

Laravel 7 Daily Automatic Database Backup Example

In this laravel daily automatic database backup example tutorial, I’ll show you how to take daily automatic backup of database in laravel apps. In this tutorial you will learn to take Daily Automatic Database Backup in laravel.

Laravel 7 Daily Automatic Database Backup Example

In this step by step tutorial I’ll guide you through the process to take daily automatic database backup in laravel. Pleasae Follow the instruction given below and take daily automatic database backup in laravel apps using schedular cron job:

Step 1: Create Command

In this step we will switch to project directory as following:

cd /project directory

1	cd /project directory

Then use the below command to create command:

php artisan make:command DbBackup

1	php artisan make:command DbBackup

The above command creates one file named DbBackup.php.

Step 2: Register Command In “Kernel.php”

In this step we will register command, go to app/console and open kernal.php file. And then put the following code into your file:

<?php
namespace App\Console;
use Illuminate\Console\Scheduling\Schedule;
use Illuminate\Foundation\Console\Kernel as ConsoleKernel;
class Kernel extends ConsoleKernel
{
    /**
     * The Artisan commands provided by your application.
     *
     * @var array
     */
   protected $commands = [
        'App\Console\Commands\DbBackup'
    ];
    /**
     * Define the application's command schedule.
     *
     * @param  \Illuminate\Console\Scheduling\Schedule  $schedule
     * @return void
     */
    protected function schedule(Schedule $schedule)
    {
        $schedule->command('db:backup')->daily();
    }
    /**
     * Register the commands for the application.
     *
     * @return void
     */
    protected function commands()
    {
        $this->load(__DIR__.'/Commands');
        require base_path('routes/console.php');
    }
}

<?php

namespace App\Console;

use Illuminate\Console\Scheduling\Schedule;

use Illuminate\Foundation\Console\Kernel as ConsoleKernel;

class Kernel extends ConsoleKernel

{

/**

* The Artisan commands provided by your application.

* @var array

protected $commands = [

'App\Console\Commands\DbBackup'

];

/**

* Define the application's command schedule.

* @param \Illuminate\Console\Scheduling\Schedule $schedule

* @return void

protected function schedule(Schedule $schedule)

{

$schedule->command('db:backup')->daily();

}

/**

* Register the commands for the application.

* @return void

protected function commands()

{

$this->load(__DIR__.'/Commands');

require base_path('routes/console.php');

}

Step 3: Edit the “ DbBackup.php”

Now, Navigate to app/Console/Commands/ folder and open DbBackup.php. And then update the following code into your file

<?php
namespace App\Console\Commands;
use Illuminate\Console\Command;
use Carbon\Carbon;
class DbBackup extends Command
{
    /**
     * The name and signature of the console command.
     *
     * @var string
     */
    protected $signature = 'db:backup';
/**
     * The console command description.
     *
     * @var string
     */
    protected $description = 'Create Database Backup';
/**
     * Create a new command instance.
     *
     * @return void
     */
    public function __construct()
    {
        parent::__construct();
    }
    /**
     * Execute the console command.
     *
     * @return mixed
     */
    public function handle()
    {
        $filename = "backup-" . Carbon::now()->format('Y-m-d') . ".gz";
        $command = "mysqldump --user=" . env('DB_USERNAME') ." --password=" . env('DB_PASSWORD') . " --host=" . env('DB_HOST') . " " . env('DB_DATABASE') . "  | gzip > " . storage_path() . "/app/backup/" . $filename;
        $returnVar = NULL;
        $output  = NULL;
        exec($command, $output, $returnVar);
    }
}

<?php

namespace App\Console\Commands;

use Illuminate\Console\Command;

use Carbon\Carbon;

class DbBackup extends Command

{

/**

* The name and signature of the console command.

* @var string

protected $signature = 'db:backup';

/**

* The console command description.

* @var string

protected $description = 'Create Database Backup';

/**

* Create a new command instance.

* @return void

public function __construct()

{

parent::__construct();

}

/**

* Execute the console command.

* @return mixed

public function handle()

{

$filename = "backup-" . Carbon::now()->format('Y-m-d') . ".gz";

$command = "mysqldump --user=" . env('DB_USERNAME') ." --password=" . env('DB_PASSWORD') . " --host=" . env('DB_HOST') . " " . env('DB_DATABASE') . " | gzip > " . storage_path() . "/app/backup/" . $filename;

$returnVar = NULL;

$output = NULL;

exec($command, $output, $returnVar);

}

Step 4: Backup Files

The above-created Laravel scheduler command which will take backup of database in zipped format and place file at “storage/app/backup”. So you can navigate storage/app/backup folder and find daily database backup files here.

Laravel 7 Form Validation Request Class Example

In this Laravel 7 Form Validation Request Class Example tutorial, I’ll show you how to validate form data using request class in laravel apps. In laravel request validation class is used to validate form data on server in laravel apps. This step by step tutorial we will be creating request validation class and validate form data on server side in laravel apps.

Laravel 7 Form Validation Request Class Example

Step 1: Create Request Class

cd blog

cd blog

Next, run the following command to create validate request class in laravel:

php artisan make:request ValidateUser

1	php artisan make:request ValidateUser

Now, go to app/Http/Requests and open ValidateUser.php class. Then update the following code into ValidateUser.php Class file:

<?php
   
namespace App\Http\Requests;
   
use Illuminate\Foundation\Http\FormRequest;
   
class ValidateUser extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        return true;
    }
   
    /** 
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public function rules()
    {
        return [
                'name' => 'required',
                'username' => 'required|min:8',
                'email' => 'required|email|unique:users'
            ];
    }
}

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class ValidateUser extends FormRequest

{

/**

* Determine if the user is authorized to make this request.

* @return bool

public function authorize()

{

return true;

}

/**

* Get the validation rules that apply to the request.

* @return array

public function rules()

{

return [

'name' => 'required',

'username' => 'required|min:8',

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

];

}

Step 2: 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('user/create', 'HomeController@create');
Route::post('user/create', 'HomeController@store');

1 2	Route::get('user/create', 'HomeController@create'); Route::post('user/create', 'HomeController@store');

Step 3: Create Controller

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

 php artisan make:controller UserController

1	php artisan make:controller UserController

Now, navigate to app/Http/Controllers and open UserController.php file. Then update the following code into your UserController.php file:

<?php
     
namespace App\Http\Controllers;
     
use Illuminate\Http\Request;
use App\User;
use App\Http\Requests\ValidateUser;
     
class UserController extends Controller
{
    /**
     * Show the application dashboard.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        return view('createUser');
    }
     
    /**
     * Show the application dashboard.
     *
     * @return \Illuminate\Http\Response
     */
    public function store(StoreUser $request)
    {
        $input = $request->all();
        $user = User::create($input);
       
        return back()->with('success', 'User created successfully.');
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\User;

use App\Http\Requests\ValidateUser;

class UserController extends Controller

{

/**

* Show the application dashboard.

* @return \Illuminate\Http\Response

public function create()

{

return view('createUser');

}

/**

* Show the application dashboard.

* @return \Illuminate\Http\Response

public function store(StoreUser $request)

{

$input = $request->all();

$user = User::create($input);

return back()->with('success', 'User created successfully.');

}

Step 4: Create Blade View

In this step, we will create a blade view file named createUser.blade.php. Go to resources/views/ folder and create blade view file here. Then put the following code into your createUser.blade.php file:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 7 form validation example</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
   
        <h1>Laravel 7 form validation example</h1>
    
        @if(Session::has('success'))
        <div class="alert alert-success">
            {{ Session::get('success') }}
            @php
                Session::forget('success');
            @endphp
        </div>
        @endif
    
        <form method="POST" action="{{ url('user/create') }}">
   
            {{ csrf_field() }}
   
            <div class="form-group">
                <label>Name:</label>
                <input type="text" name="name" class="form-control" placeholder="Name">
                @if ($errors->has('name'))
                    <span class="text-danger">{{ $errors->first('name') }}</span>
                @endif
            </div>
    
            <div class="form-group">
                <label>Password:</label>
                <input type="password" name="password" class="form-control" placeholder="Password">
                @if ($errors->has('password'))
                    <span class="text-danger">{{ $errors->first('password') }}</span>
                @endif
            </div>
     
            <div class="form-group">
                <strong>Email:</strong>
                <input type="text" name="email" class="form-control" placeholder="Email">
                @if ($errors->has('email'))
                    <span class="text-danger">{{ $errors->first('email') }}</span>
                @endif
            </div>
    
            <div class="form-group">
                <button class="btn btn-success btn-submit">Submit</button>
            </div>
        </form>
    </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Laravel 7 form validation example</title>

</head>

<body>

<h1>Laravel 7 form validation example</h1>

@if(Session::has('success'))

@php

Session::forget('success');

@endphp

</div>

@endif

@if ($errors->has('name'))

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

@endif

</div>

<label>Password:</label>

@if ($errors->has('password'))

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

@endif

</div>

<strong>Email:</strong>

@if ($errors->has('email'))

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

@endif

</div>

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

</div>

</form>

</div>

</body>

</html>

Laravel 7 Unique Validation Example Tutorial

In this Laravel 7 Unique Validation Example Tutorial I’ll show you how to implement unique validations in laravel. In this tutorial you will learn add unique validation in laravel fields. In this step by step tutorial I’ll demonstrate various example to implement unique validation in laravel.

Laravel 7 Unique Validation Example Tutorial

Simple Unique Validation on Controller
Unique Validation with Column Name
Unique Validation with Rule
Laravel Unique Validation on Update

1: Simple Unique Validation on Controller

In laravel when you insert data into table but you want to check data is exist or not. So you can use simple unique validation in laravel. The following unique validation rule is simple. And you can use it as follow:

public function store(Request $request)
{
 
       request()->validate([
 
        'name' => 'required',
        'username' => 'required|min:8',
        'email' => 'required|email|unique:users',
        'contact' => 'required|unique:users'
 
       ]);
         
 
}

public function store(Request $request)

{

request()->validate([

'name' => 'required',

'username' => 'required|min:8',

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

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

]);

}

2: Unique Validation with Column Name

In laravel it is possible to pass column name along with the unique validation. Please have look in below example code.

public function store(Request $request)
{
 
       request()->validate([
 
        'name' => 'required',
        'username' => 'required|min:8',
        'email' => 'required|email|unique:users,email',
        'contact' => 'required|unique:users'
 
       ]);
         
 
}

public function store(Request $request)

{

request()->validate([

'name' => 'required',

'username' => 'required|min:8',

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

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

]);

}

3: Unique Validation with Rule

Before using unique validation with the rule, you need to import use Illuminate\Validation\Rule;. Then you can use it as follow:

public function store(Request $request)
{
 
       request()->validate([
 
        'name' => 'required',
        'username' => 'required|min:8',
        'email' => ['required', Rule::unique('users')],
        'contact' => 'required|unique:users'
 
       ]);
         
 
}

public function store(Request $request)

{

request()->validate([

'name' => 'required',

'username' => 'required|min:8',

'email' => ['required', Rule::unique('users')],

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

]);

}

4: Laravel Unique Validation on Update

In this example we have demonstrate to implement unique validation on update operation in laravel.

public function store(Request $request)
{
 
       request()->validate([
 
        'name' => 'required',
        'username' => 'required|min:8',
        'email' => 'required|email|unique:users,email,'.$this->user->id,
        'contact' => 'required|unique:users'
 
       ]);
         
 
}

public function store(Request $request)

{

request()->validate([

'name' => 'required',

'username' => 'required|min:8',

'email' => 'required|email|unique:users,email,'.$this->user->id,

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

]);

}

Laravel 7 Soft Delete With Unique Validation

In this Laravel 7 Soft Delete With Unique Validation I’ll show you how add soft delete with unique validation in laravel. In this tutorial you will learn to implement and use soft delete property in laravel. In this step by step guide I’ll demonstrate you to implement and use soft delete in laravel project.

Laravel 7 Soft Delete With Unique Validation

use Illuminate\Database\Eloquent\SoftDeletes;
 
class User extends Model
{
    use SoftDeletes;
    public $timestamps = true;
    protected $fillable = [
        'name',
        'email',
        'created_by',
        'updated_by',
    ];
}

use Illuminate\Database\Eloquent\SoftDeletes;

class User extends Model

{

use SoftDeletes;

public $timestamps = true;

protected $fillable = [

'name',

'email',

'created_by',

'updated_by',

];

}

Laravel Unique Validation with Soft Delete

In this example you will learn to add unique validation with soft delete on inserting of data in laravel.

Example 1: On inserting data

public function store(Request $request)

{

    $request->validate([

        'name'=>'required|unique:form_types,name,NULL,id,deleted_at,NULL',

    ]);

    // Write your code here

}

public function store(Request $request)

{

$request->validate([

'name'=>'required|unique:form_types,name,NULL,id,deleted_at,NULL',

]);

// Write your code here

}

Example 2: On updating data

In this example you will learn to add unique validation with soft delete on updating of data in laravel.

public function update(Request $request, $id)

{

    $request->validate([

        'name'=>'required|unique:form_types,name,'.$id.',id,deleted_at,NULL',

    ]);

    // Write Code here

}

public function update(Request $request, $id)

{

$request->validate([

'name'=>'required|unique:form_types,name,'.$id.',id,deleted_at,NULL',

]);

// Write Code here

}

Laravel Redirect HTTP to HTTPS using htaccess

In this Laravel Redirect HTTP to HTTPS using htaccess tutorial I’ll show you how to redirect http to https using htaccess file in laravel. In this tutorial, you will learn how to redirect HTTP to HTTPS your laravel website with .htaccess.

Laravel Redirect HTTP to HTTPS using htaccess

Sometimes, when you need to secure your laravel web with an SSL certificate. When you have applied ssl certificate to your laravel application. Then you are required to your existing http urls to https version of urls in order to secure access of your application. In laravel urls with HTTP will not be redirected automatically to HTTPS after you apply SSL certificate.

In laravel it is possible to redirect existing http links to https urls automatically with htaccess file. To do so you have to do some configuration in the .htaccess file of Laravel App. Then it will automatic redirect http request to Https in laravel web app.

Navigate to your laravel root directory and find .htaccess file. After that open .htaccess file and update the following codes into it:

# ensure www.
RewriteCond %{HTTP_HOST} !^www\. [NC]
RewriteRule ^ https://www.%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
  
# ensure https
RewriteCond %{HTTP:X-Forwarded-Proto} !https
RewriteCond %{HTTPS} off
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

# ensure www.

RewriteCond %{HTTP_HOST} !^www\. [NC]

RewriteRule ^ https://www.%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

# ensure https

RewriteCond %{HTTP:X-Forwarded-Proto} !https

RewriteCond %{HTTPS} off

RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

Laravel 7 Phone Number Validation Example

In this Laravel 7 Phone Number Validation Example tutorial I’ll show you how to create custom phone number validation in laravel. In this tutorial you will learn to create phone number validation in laravel. In step by step tutorial I’ll demonstrate you to implement custom phone number validation in laravel.

Laravel 7 Phone Number Validation Example

Step 1: Add Routes

In this step 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('form','UserController@index');
Route::post('store','UserController@store');

1 2	Route::get('form','UserController@index'); Route::post('store','UserController@store');

Step 2: Create Controller & Method

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

php artisan make:controller UserController

1	php artisan make:controller UserController

This command will create controller named UserController.php file. So navigate to app\Http\Controllers folder and open UserController.php file. Then update the following methods into it:

namespace App\Http\Controllers;
     
use Illuminate\Http\Request;
use App\User;
     
class HomeController extends Controller
{
    /**
     * Show the application dashboard.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('user');
    }
     
    /**
     * Show the application dashboard.
     *
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $request->validate([
                'name' => 'required',
                'phone' => 'required|digits:10',
                'email' => 'required|email|unique:users'
            ]);
     
        $input = $request->all();
        $user = User::create($input);
       
        return back()->with('success', 'User added successfully.');
    }

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\User;

class HomeController extends Controller

{

/**

* Show the application dashboard.

* @return \Illuminate\Http\Response

public function index()

{

return view('user');

}

/**

* Show the application dashboard.

* @return \Illuminate\Http\Response

public function store(Request $request)

{

$request->validate([

'name' => 'required',

'phone' => 'required|digits:10',

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

]);

$input = $request->all();

$user = User::create($input);

return back()->with('success', 'User added successfully.');

}

Step 3: Create Blade View

Now, Navigate to resources/views and create new blade view file named user.blade.php and update the following code into it:

<!doctype html>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <title>Laravel 7 Phone Number Validation Example</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
    <h2 style="margin-top: 10px;">Laravel 7 Phone Number Validation Example</h2>
    <br>
    <br>
    @if ($message = Session::get('success'))
    <div class="alert alert-success alert-block">
        <button type="button" class="close" data-dismiss="alert">×</button>
          <strong>{{ $message }}</strong>
    </div>
    <br>
    @endif
   
    <form method="post" action="{{url('store')}}">
      @csrf
 
      <div class="form-group">
        <label for="formGroupExampleInput">Name</label>
        <input type="text" name="name" class="form-control" id="formGroupExampleInput" placeholder="Please enter name">
        <span class="text-danger">{{ $errors->first('name') }}</span>
      </div>
 
      <div class="form-group">
        <label for="formGroupExampleInput2">Email</label>
        <input type="email" name="email" class="form-control" id="formGroupExampleInput2" placeholder="Please enter password">
        <span class="text-danger">{{ $errors->first('email') }}</span>
      </div>
           
      <div class="form-group">
        <label for="formGroupExampleInput2">Phone Number</label>
        <input type="text" name="phone" class="form-control" id="formGroupExampleInput2" placeholder="Please enter mobile number">
        <span class="text-danger">{{ $errors->first('phone') }}</span>
      </div>
 
      <div class="form-group">
       <button type="submit" class="btn btn-success">Submit</button>
      </div>
    </form>
</div>
</body>
</html>

<!doctype html>

<head>

<title>Laravel 7 Phone Number Validation Example</title>

</head>

<body>

<h2 style="margin-top: 10px;">Laravel 7 Phone Number Validation Example</h2>

<br>

@if ($message = Session::get('success'))

<strong>{{ $message }}</strong>

</div>

<br>

@endif

@csrf

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

</div>

<label for="formGroupExampleInput2">Email</label>

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

</div>

<label for="formGroupExampleInput2">Phone Number</label>

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

</div>

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

</div>

</form>

</div>

</body>

</html>

The below also provide a different way for laravel phone number validation methods, you can also use instead of the above methods:

    //first solution
    $this->validate($request, [
      'phone' => 'required|digits:10'
    ]);
    
   //second solution
    $this->validate($request, [
        'phone' => 'required|numeric|between:9,11'
    ]);
    
   /third solution
    $this->validate($request, [
        'phone' => 'required|min:10|numeric'
    ]);

    //fourth solution
    $this->validate($request, [
        'phone' => 'required|regex:/(01)[0-9]{9}/'
    ]);
   
    //fifth solution
     $this->validate($request, [
        'phone' => 'required|regex:/^([0-9\s\-\+\(\)]*)$/|min:10'
    ]);

//first solution

$this->validate($request, [

'phone' => 'required|digits:10'

]);

//second solution

$this->validate($request, [

'phone' => 'required|numeric|between:9,11'

]);

/third solution

$this->validate($request, [

'phone' => 'required|min:10|numeric'

]);

//fourth solution

$this->validate($request, [

'phone' => 'required|regex:/(01)[0-9]{9}/'

]);

//fifth solution

$this->validate($request, [

'phone' => 'required|regex:/^([0-9\s\-\+]*)$/|min:10'

]);

Laravel 7 Push Notification to Android and IOS Example

In this Laravel 7 Push Notification to Android and IOS Example tutorial, I’ll show you how to send push notification to android and Ios in laravel. In this tutorial you will learn send push notification in laravel project. In this step by step guide I’ll demonstrate you the process to send push notification in laravel.

Laravel 7 Push Notification to Android and IOS Example

Step 1: Create a Helper File

In this step we will create a helper file. Go to App directory and inside this directory create a new file new helpers.php. Now put the following code into your helpers.php file as follow:

app/helpers.php

<?php
  
  function send_notification_FCM($notification_id, $title, $message, $id,$type) {
 
    $accesstoken = env('FCM_KEY');
 
    $URL = 'https://fcm.googleapis.com/fcm/send';
 
 
        $post_data = '{
            "to" : "' . $notification_id . '",
            "data" : {
              "body" : "",
              "title" : "' . $title . '",
              "type" : "' . $type . '",
              "id" : "' . $id . '",
              "message" : "' . $message . '",
            },
            "notification" : {
                 "body" : "' . $message . '",
                 "title" : "' . $title . '",
                  "type" : "' . $type . '",
                 "id" : "' . $id . '",
                 "message" : "' . $message . '",
                "icon" : "new",
                "sound" : "default"
                },
 
          }';
        // print_r($post_data);die;
 
    $crl = curl_init();
 
    $headr = array();
    $headr[] = 'Content-type: application/json';
    $headr[] = 'Authorization: ' . $accesstoken;
    curl_setopt($crl, CURLOPT_SSL_VERIFYPEER, false);
 
    curl_setopt($crl, CURLOPT_URL, $URL);
    curl_setopt($crl, CURLOPT_HTTPHEADER, $headr);
 
    curl_setopt($crl, CURLOPT_POST, true);
    curl_setopt($crl, CURLOPT_POSTFIELDS, $post_data);
    curl_setopt($crl, CURLOPT_RETURNTRANSFER, true);
 
    $rest = curl_exec($crl);
 
    if ($rest === false) {
        // throw new Exception('Curl error: ' . curl_error($crl));
        //print_r('Curl error: ' . curl_error($crl));
        $result_noti = 0;
    } else {
 
        $result_noti = 1;
    }
 
    //curl_close($crl);
    //print_r($result_noti);die;
    return $result_noti;
}

<?php

function send_notification_FCM($notification_id, $title, $message, $id,$type) {

$accesstoken = env('FCM_KEY');

$URL = 'https://fcm.googleapis.com/fcm/send';

$post_data = '{

"to" : "' . $notification_id . '",

"data" : {

"body" : "",

"title" : "' . $title . '",

"type" : "' . $type . '",

"id" : "' . $id . '",

"message" : "' . $message . '",

"notification" : {

"body" : "' . $message . '",

"title" : "' . $title . '",

"type" : "' . $type . '",

"id" : "' . $id . '",

"message" : "' . $message . '",

"icon" : "new",

"sound" : "default"

}';

// print_r($post_data);die;

$crl = curl_init();

$headr = array();

$headr[] = 'Content-type: application/json';

$headr[] = 'Authorization: ' . $accesstoken;

curl_setopt($crl, CURLOPT_SSL_VERIFYPEER, false);

curl_setopt($crl, CURLOPT_URL, $URL);

curl_setopt($crl, CURLOPT_HTTPHEADER, $headr);

curl_setopt($crl, CURLOPT_POST, true);

curl_setopt($crl, CURLOPT_POSTFIELDS, $post_data);

curl_setopt($crl, CURLOPT_RETURNTRANSFER, true);

$rest = curl_exec($crl);

if ($rest === false) {

// throw new Exception('Curl error: ' . curl_error($crl));

//print_r('Curl error: ' . curl_error($crl));

$result_noti = 0;

} else {

$result_noti = 1;

}

//curl_close($crl);

//print_r($result_noti);die;

return $result_noti;

}

Step 2: Add Fcm Key in .env

In this step we will add fcm key in laravel project’s .env file. Go to your project root directory and open .env file. Then update fcm key as follow:

FCM_KEY =

FCM_KEY =

Now, you can use your google fcm key as follow

$accesstoken = env('FCM_KEY');

1	$accesstoken = env('FCM_KEY');

Step 3: Send Notification

In this step, open your controller file and you can call send_notification_FCM($notification_id, $title, $message, $id,$type) from helpers.php with following parameters.

public function notifyUser(Request $request){
 
   $user = User::where('id', $request->id)->first();
 
   $notification_id = $user->notification_id;
   $title = "Greeting Notification";
   $message = "Have good day!";
   $id = $user->id;
   $type = "basic";
 
   $res = send_notification_FCM($notification_id, $title, $message, $id,$type);
 
   if($res == 1){
 
      // success code
 
   }else{
 
     // fail code
   }
    
 
}

public function notifyUser(Request $request){

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

$notification_id = $user->notification_id;

$title = "Greeting Notification";

$message = "Have good day!";

$id = $user->id;

$type = "basic";

$res = send_notification_FCM($notification_id, $title, $message, $id,$type);

if($res == 1){

// success code

}else{

// fail code

}

send_notification_FCM() with following parameter $notification_id, $title, $message, $id,$type. Now when you want to send push notification you need to call the send_notification_FCM() with parameters as specified.

Laravel Dynamic Ajax Dependent Dropdown

Step 1: Install Laravel New App

Step 2: Add Database Details

Step 3: Create Modal and Migration

Step 4: Add Routes

Step 5: Create Controllers by Artisan

Step 6: Create Blade Views

Step 7: Run Development Server

Laravel 7 Vue JS Full Calendar Example

Step 1: Download Laravel Fresh App

Step 2: Add Database Details

Step 3: Create Model And Migration

Step 4: NPM Module Configuration For Vue Js

Step 5: Add Routes

Step 6: Create Controller By Command

Step 7: Create Vue Component

Step 8: Create Blade Views And Initialize Vue Components

Step 9: Run Development Server

Laravel 7 Vue JS Owl Carousel Slider Example

Step 1: Download Laravel Fresh App

Step 2: Add Database Details

Step 3: Create Model And Migration

Step 4: NPM Module Configuration For Vue Js

Step 5: Add Routes

Step 6: Create Controller By Command

Step 7: Create Vue Component

Step 8: Create Blade Views And Initialize Vue Components

Step 9: Run Development Server

Laravel 7 Vue JS Live Search Example Tutorial

Step 1: Download Laravel Fresh App

Step 2: Add Database Details

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

Laravel 7 Database Backup Example Tutorial

Step 1: Install Package

Step 2: Add ServiceProvider

Step 3: Publish Vendor Of Package

Step 4: Backup With Command

Laravel 7 Daily Automatic Database Backup Example

Step 1: Create Command

Step 2: Register Command In “Kernel.php”

Step 3: Edit the “ DbBackup.php”

Step 4: Backup Files

Laravel 7 Form Validation Request Class Example

Step 1: Create Request Class

Step 2: Add Routes

Step 3: Create Controller

Step 4: Create Blade View

Laravel 7 Unique Validation Example Tutorial

1: Simple Unique Validation on Controller

2: Unique Validation with Column Name

3: Unique Validation with Rule

4: Laravel Unique Validation on Update

Laravel 7 Soft Delete With Unique Validation

Laravel Unique Validation with Soft Delete

Example 1: On inserting data

Example 2: On updating data

Laravel Redirect HTTP to HTTPS using htaccess

Laravel 7 Phone Number Validation Example

Step 1: Add Routes

Step 2: Create Controller & Method

Step 3: Create Blade View

Laravel 7 Push Notification to Android and IOS Example

Step 1: Create a Helper File

Step 2: Add Fcm Key in .env

Step 3: Send Notification