Category Archives: Laravel

Laravel Tutorials

Laravel 8 Bootstrap Auth Scaffolding Example

In this Laravel 8 Bootstrap Auth Scaffolding Example Tutorial I will show how to create login, register, logout, forget password, profile and reset password page using laravel Bootstrap Auth Scaffolding without using laravel 8 make:auth command. Bootstrap Auth Scaffolding enable us to generate default laravel authentication scaffolding. Bootstrap Auth Scaffolding includes fully functional login, register, logout, reset password, forget password, email verification, two-factor authentication, session management.

In this laravel 8 Bootstrap Auth Scaffolding tutorial I will show you hot to use Bootstrap Auth Scaffolding to create auth scaffolding in laravel 8. Bootstrap Auth Scaffolding will include login, register, reset the password, forget password, email verification, and two-factor authentication blade views and controller file.

In this laravel 8 bootstrap auth example tutorial, I will show you how to use laravel Ui and bootstrap auth to implement default login, register, reset the password, forget password, email verification, and two-factor authentication blade views and controller file.

Laravel 8 Bootstrap Auth Scaffolding Example

In this step by step laravel 8 bootstrap auth example tutorial we will learn how to implement or generate Auth Scaffolding using laravel ui and bootstrap auth. Please follow the instruction given below:

Step 1 – Install Laravel 8 App
Step 2 – Database Configuration
Step 3 – Install Laravel UI
Step 4 – Install Bootstrap Auth Scaffolding
Step 5 – Install Npm Packages
Step 6 – Run PHP artisan Migrate
Step 7 – Run Development Server

Step 1 – Install Laravel 8 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 Laravel8Auth

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

Step 2 – Database Configuration

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=db name
DB_USERNAME=db user name
DB_PASSWORD=db password

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=db name

DB_USERNAME=db user name

DB_PASSWORD=db password

Step 3 – Install Laravel UI

Now, switch the laravel project directory and run the following composer command to install laravel/ui package. Laravel UI is an official library that offers selective or predefined UI components. The laravel/ui package comes with the login and registration scaffolding for React, Vue, jQuery, and Bootstrap layouts. Run the following composer command to install Laravel/UI.

composer require laravel/ui

1	composer require laravel/ui

Step 4 – Install Bootstrap Auth Scaffolding

Use the following artisan command to Install the auth scaffoldings with Bootstrap.

php artisan ui bootstrap --auth

1	php artisan ui bootstrap --auth

Now, you have successfully installed bootstrap in your laravel 8 project, you can see your resource directory js folder.

Step 5 – Install Npm Packages

Now, you need to install the bootstrap package and the related frontend dependencies such as jquery from npm using the following command:

npm install

1	npm install

Then type the following command on cmd to run npm:

npm run dev

1	npm run dev

Step 6 – Run php artisan Migrate

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

php artisan migrate

1	php artisan migrate

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/

1	http://127.0.0.1:8000/

Laravel 8 Multi Authentication Example Tutorial

In this Laravel 8 Multi Authentication Example Tutorial I’ll show you how to create multi auth system using middleware in laravel 8. In Laravel Multiple authentication system multiple users can log in in one application according to their roles.

While developing a laravel application there comes situations where we want create separate user login or separate user/admin panel for users having different privileges or access rights in same application. In this laravel multi auth system, In this example we will create a middleware for checking the user’s role. It is an admin or normal user. We will create middleware name admin and configuration in the kernal.php file and also in the route file.

Laravel 8 Multi Authentication Example Tutorial

In this step by step Laravel 8 Multi Authentication Example we will learn to implement multi auth system using middleware in laravel 8.

Step 1: Install Laravel 8 App
Step 2: Connecting App to Database
Step 3: Setting up migration and model
Step 4: Create Middleware and Setting up
Step 5: Define Route
Step 6: Create Methods in Controller
Step 7: Create Blade View
Step 8: Start Development Server

Step 1: Install Laravel 8 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 LaraMulti

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

Step 2: Connecting App to Database

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. Setting up migration and model

In this step we will add is_admin column in the users table using laravel mirgration. So, Open the creates_users_table.php migration file, which is placed on Database/migration and update the following field for admin.

$table->boolean('is_admin')->nullable();

1	$table->boolean('is_admin')->nullable();

Next open app/User.php and update the below field name is_admin here:

<?php
   
namespace App\Models;
   
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
   
class User extends Authenticatable
{
    use HasFactory, Notifiable;
   
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name', 'email', 'password', 'is_admin'
    ];
   
    /**
     * The attributes that should be hidden for arrays.
     *
     * @var array
     */
    protected $hidden = [
        'password', 'remember_token',
    ];
   
    /**
     * The attributes that should be cast to native types.
     *
     * @var array
     */
    protected $casts = [
        'email_verified_at' => 'datetime',
    ];
}

<?php

namespace App\Models;

use Illuminate\Contracts\Auth\MustVerifyEmail;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Foundation\Auth\User as Authenticatable;

use Illuminate\Notifications\Notifiable;

class User extends Authenticatable

{

use HasFactory, Notifiable;

/**

* The attributes that are mass assignable.

* @var array

protected $fillable = [

'name', 'email', 'password', 'is_admin'

];

/**

* The attributes that should be hidden for arrays.

* @var array

protected $hidden = [

'password', 'remember_token',

];

/**

* The attributes that should be cast to native types.

* @var array

protected $casts = [

'email_verified_at' => 'datetime',

];

}

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

php artisan migrate

1	php artisan migrate

Step 4: Install Laravel UI

Then install laravel 8 UI in your project using the below command:

 composer require laravel/ui

1	composer require laravel/ui

Now, execute the below command on terminal for creating login, registration, forget password and reset password blade files:

  php artisan ui bootstrap --auth

1	php artisan ui bootstrap --auth

Then execute the following commands:

npm install
npm run dev

1 2	npm install npm run dev

Step 5: Create Middleware and Setting up

In this step we will create middleware for checking the user’s role. It is an admin or normal user.

php artisan make:middleware IsAdmin

1	php artisan make:middleware IsAdmin

Once the above command is executed a middleware is created. Noe go to app/Http/middleware and Implement the logic to check user role.

<?php
   
namespace App\Http\Middleware;
   
use Closure;
    
class IsAdmin
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        if(auth()->user()->is_admin == 1){
            return $next($request);
        }
    
        return redirect(‘home’)->with(‘error’,"You don't have admin access.");
    }
}

<?php

namespace App\Http\Middleware;

use Closure;

class IsAdmin

{

/**

* Handle an incoming request.

* @param \Illuminate\Http\Request $request

* @param \Closure $next

* @return mixed

public function handle($request, Closure $next)

{

if(auth()->user()->is_admin == 1){

return $next($request);

}

return redirect(‘home’)->with(‘error’,"You don't have admin access.");

}

Now, we will register this middleware in the app/Http/Kernel.php. Now, open kernal.php and add the following $routeMiddleware property in it:

....
protected $routeMiddleware = [
    'auth' => \App\Http\Middleware\Authenticate::class,
    'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
    'bindings' => \Illuminate\Routing\Middleware\SubstituteBindings::class,
    'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class,
    'can' => \Illuminate\Auth\Middleware\Authorize::class,
    'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
    'signed' => \Illuminate\Routing\Middleware\ValidateSignature::class,
    'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
    'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
    'is_admin' => \App\Http\Middleware\IsAdmin::class,
];
....

....

protected $routeMiddleware = [

'auth' => \App\Http\Middleware\Authenticate::class,

'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,

'bindings' => \Illuminate\Routing\Middleware\SubstituteBindings::class,

'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class,

'can' => \Illuminate\Auth\Middleware\Authorize::class,

'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,

'signed' => \Illuminate\Routing\Middleware\ValidateSignature::class,

'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,

'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,

'is_admin' => \App\Http\Middleware\IsAdmin::class,

];

....

Step 5: Define Route

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

routes/web.php

<?php

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\HomeController;

Route::get('admin/home', [HomeController::class, 'adminHome'])->name('admin.home')->middleware('is_admin');

<?php

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\HomeController;

Route::get('admin/home', [HomeController::class, 'adminHome'])->name('admin.home')->middleware('is_admin');

Step 6: Create Methods in Controller

Now open the HomeController.php file, which is placed on app/Http/Controllers/ directory. Then add the following code into it:

<?php
    
namespace App\Http\Controllers;
   
use Illuminate\Http\Request;
    
class HomeController extends Controller
{
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('auth');
    }
   
    /**
     * Show the application dashboard.
     *
     * @return \Illuminate\Contracts\Support\Renderable
     */
    public function index()
    {
        return view('home');
    }
   
    /**
     * Show the application dashboard.
     *
     * @return \Illuminate\Contracts\Support\Renderable
     */
    public function adminHome()
    {
        return view('adminHome');
    }
     
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HomeController extends Controller

{

/**

* Create a new controller instance.

* @return void

public function __construct()

{

$this->middleware('auth');

}

/**

* Show the application dashboard.

* @return \Illuminate\Contracts\Support\Renderable

public function index()

{

return view('home');

}

/**

* Show the application dashboard.

* @return \Illuminate\Contracts\Support\Renderable

public function adminHome()

{

return view('adminHome');

}

Step 7: Create Blade View

Now, create two blade view files first is display home page and second is display after login. Open the resources/views/home.blade. file and update the below code.

@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">
                    @if(auth()->user()->is_admin == 1)
                    <a href="{{url('admin/routes')}}">Admin</a>
                    @else
                    <div class=”panel-heading”>Normal User</div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@extends('layouts.app')

@section('content')

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

@if(auth()->user()->is_admin == 1)

<a href="{{url('admin/routes')}}">Admin</a>

@else

<div class=”panel-heading”>Normal User</div>

@endif

</div>

@endsection

Now, I checked the user profile. If it is admin, it will navigate to the admin area. Otherwise, it will redirect to users area. Create admin.blade.php file inside resources/views/ directory and update the following code:

@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">
                    @if(auth()->user()->is_admin == 1)
                    <a href="{{url('admin/routes')}}">Admin</a>
                    @else
                    <div class=”panel-heading”>Normal User</div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@extends('layouts.app')

@section('content')

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

@if(auth()->user()->is_admin == 1)

<a href="{{url('admin/routes')}}">Admin</a>

@else

<div class=”panel-heading”>Normal User</div>

@endif

</div>

@endsection

Step 8: 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

Laravel 8 Highcharts Example Tutorial

n this Laravel 8 Highcharts Example Tutorial I will show you how to implement highchart in laravel 8 application. In this tutorial you will learn to implement highchart in laravel 8. In this example I will demonstrate the use of highchart in laravel application. In this example we will fetch month wise data and display month wise data in highcharts for analytics on laravel application.

Laravel 8 Highcharts Example Tutorial

In this step by step tutorial I will demonstrate you how to implement Highcharts in Laravel 8 application. Please follow the instruction given below:

Step 1: Create web routes

In the first step we will define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

<?php

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\HighChartController;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('highchart', [HighChartController::class, 'index']);

<?php

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\HighChartController;

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

| Web Routes

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

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

| routes are loaded by the RouteServiceProvider within a group which

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

Route::get('highchart', [HighChartController::class, 'index']);

Step 2: Create Controller

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

php artisan make:controller HighChartController

1	php artisan make:controller HighChartController

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

app/Http/Controllers/HighChartController.php

<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
use App\Models\User;
  
class HighChartController extends Controller
{
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    public function index()
    {
        $users = User::select(\DB::raw("COUNT(*) as count"))
                    ->whereYear('created_at', date('Y'))
                    ->groupBy(\DB::raw("Month(created_at)"))
                    ->pluck('count');
          
        return view('highchart', compact('users'));
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Models\User;

class HighChartController extends Controller

{

/**

* The attributes that are mass assignable.

* @var array

public function index()

{

$users = User::select(\DB::raw("COUNT(*) as count"))

->whereYear('created_at', date('Y'))

->groupBy(\DB::raw("Month(created_at)"))

->pluck('count');

return view('highchart', compact('users'));

}

Step 3: Create Blade File

Now, we will create a blade view file. Go to the resources/views/highchart.blade.php and put the below javascript and HTML code for displaying the highchart. So go to the resources/views/ and update the below javascript and HTML code for displaying the highchart:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 8 Highcharts Example/title>
</head>
    
<body>
<h1>Laravel 8 Highcharts Example</h1>
<div id="container"></div>
</body>
   
<script src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
    var users =  <?php echo json_encode($users) ?>;
    
    Highcharts.chart('container', {
        title: {
            text: 'New User Growth, 2019'
        },
        subtitle: {
            text: 'Source: w3adda.com'
        },
         xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Number of New Users'
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },
        plotOptions: {
            series: {
                allowPointSelect: true
            }
        },
        series: [{
            name: 'New Users',
            data: users
        }],
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'
                    }
                }
            }]
        }
});
</script>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Laravel 8 Highcharts Example/title>

</head>

<body>

<h1>Laravel 8 Highcharts Example</h1>

</body>

var users = <?php echo json_encode($users) ?>;

Highcharts.chart('container', {

title: {

text: 'New User Growth, 2019'

subtitle: {

text: 'Source: w3adda.com'

xAxis: {

categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

yAxis: {

title: {

text: 'Number of New Users'

}

legend: {

align: 'right',

verticalAlign: 'middle'

plotOptions: {

series: {

allowPointSelect: true

}

series: [{

data: users

}],

responsive: {

rules: [{

condition: {

maxWidth: 500

chartOptions: {

legend: {

align: 'center',

verticalAlign: 'bottom'

}

}]

}

});

</script>

</html>

Remember to include highchart js libraries on your blade file:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

Use below javascript as per requirement :

<script type="text/javascript">
   let chart =  JSON.parse(`<?php echo $chart ?>`);
    
    Highcharts.chart('container', {
        title: {
            text: 'New User Growth, 2019'
        },
        subtitle: {
            text: 'Source: w3adda.com'
        },
         xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Number of New Users'
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },
        plotOptions: {
            series: {
                allowPointSelect: true
            }
        },
        series: [{
            name: 'New Users',
            data: chart
        }],
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'
                    }
                }
            }]
        }
});
</script>

let chart = JSON.parse(`<?php echo $chart ?>`);

Highcharts.chart('container', {

title: {

text: 'New User Growth, 2019'

subtitle: {

text: 'Source: w3adda.com'

xAxis: {

categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

yAxis: {

title: {

text: 'Number of New Users'

}

legend: {

align: 'right',

verticalAlign: 'middle'

plotOptions: {

series: {

allowPointSelect: true

}

series: [{

data: chart

}],

responsive: {

rules: [{

condition: {

maxWidth: 500

chartOptions: {

legend: {

align: 'center',

verticalAlign: 'bottom'

}

}]

}

});

</script>

Step 4: 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/highchart

1	http://127.0.0.1:8000/highchart

Laravel 8 Google Line Chart Tutorial Example

In this Laravel 8 Google Line Chart Tutorial Example I’ll will show how to use google line chart in laravel application. In this tutorial you will learn to implement google line char in laravel 8 project. With Google Charts we can visualize data in your laravel web application. In this tutorialI’ll share example to demonstrate use of google line graph chart in laravel.

Laravel 8 Google Line Chart Tutorial Example

In this step by step tutorial I will demonstrate you how to create google line chart in laravel 8 application. Please follow the instruction given below:

Step 1: Install Laravel 8 App
Step 2: Connecting App to Database
Step 3: Make Routes
Step 4: Create Controller
Step 5: Create Blade File
Step 6: Run Development Server

Step 1: Install Laravel 8 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: Connecting App to Database

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: Make 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

use App\Http\Controllers\GoogleLineController;
Route::get('laravel-google-line-chart', [GoogleLineController::class, 'index']);

1 2	use App\Http\Controllers\GoogleLineController; Route::get('laravel-google-line-chart', [GoogleLineController::class, 'index']);

Step 4: Create Controller

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

php artisan make:controller GoogleLineController

1	php artisan make:controller GoogleLineController

Now, go to app/http/controller folder and open GoogleLineController.php. And add the following code into your GoogleLineController.php file:

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
Use DB;
 
use App\Models\User;
 
use Carbon\Carbon;
 
class GoogleLineController extends Controller
{
        /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
 
     $data['lineChart'] = User::select(\DB::raw("COUNT(*) as count"), \DB::raw("MONTHNAME(created_at) as month_name"),\DB::raw('max(created_at) as createdAt'))
        ->whereYear('created_at', date('Y'))
        ->groupBy('month_name')
        ->orderBy('createdAt')
        ->get();
 
        return view('google-line-chart', $data);
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

Use DB;

use App\Models\User;

use Carbon\Carbon;

class GoogleLineController extends Controller

{

/**

* Display a listing of the resource.

* @return \Illuminate\Http\Response

public function index()

{

$data['lineChart'] = User::select(\DB::raw("COUNT(*) as count"), \DB::raw("MONTHNAME(created_at) as month_name"),\DB::raw('max(created_at) as createdAt'))

->whereYear('created_at', date('Y'))

->groupBy('month_name')

->orderBy('createdAt')

->get();

return view('google-line-chart', $data);

}

Step 5: Create Blade File

In this step we will create blade view file. Go to /resources/views/ folder and create one blade view file name google-line-chart.blade.php. And put the following code into your google-line-chart.blade.php file:

<!doctype html>
<html lang="en">
  <head>
    <title>Laravel 8 Google Line Graph Chart</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  </head>
  <body>
 
    <div class="container p-5">
        <h5>Laravel 8 Google Line Chart</h5>
 
        <div id="google-line-chart" style="width: 900px; height: 500px"></div>
 
    </div>
 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(drawChart);
 
        function drawChart() {
 
        var data = google.visualization.arrayToDataTable([
            ['Month Name', 'Register Users Count'],
 
                @php
                foreach($lineChart as $d) {
                    echo "['".$d->month_name."', ".$d->count."],";
                }
                @endphp
        ]);
 
        var options = {
          title: 'Register Users Month Wise',
          curveType: 'function',
          legend: { position: 'bottom' }
        };
 
          var chart = new google.visualization.LineChart(document.getElementById('google-line-chart'));
 
          chart.draw(data, options);
        }
    </script>
</body>
</html>

<!doctype html>

<head>

<title>Laravel 8 Google Line Graph Chart</title>

</head>

<body>

<h5>Laravel 8 Google Line Chart</h5>

</div>

google.charts.load('current', {'packages':['corechart']});

google.charts.setOnLoadCallback(drawChart);

function drawChart() {

var data = google.visualization.arrayToDataTable([

['Month Name', 'Register Users Count'],

@php

foreach($lineChart as $d) {

echo "['".$d->month_name."', ".$d->count."],";

}

@endphp

]);

var options = {

title: 'Register Users Month Wise',

curveType: 'function',

legend: { position: 'bottom' }

};

var chart = new google.visualization.LineChart(document.getElementById('google-line-chart'));

chart.draw(data, options);

}

</script>

</body>

</html>

Step 6: 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/laravel-google-line-chart

1	http://localhost:8000/laravel-google-line-chart

Laravel 8 Dynamic Google Pie Charts Example

In this Laravel 8 Dynamic Google Pie Charts Example Tutorial I’ll will show how to use google Pie chart in laravel 8 application. In this tutorial you will learn to implement google Pie chart in laravel 8 project. With Google Charts we can visualize data in your laravel web application. In this tutorialI’ll share example to demonstrate use of google Pie chart in laravel.

Laravel 8 Dynamic Google Pie Charts Example

In this step by step tutorial I will demonstrate you how to create Dynamic Google Pie Charts in laravel 8 application. Please follow the instruction given below:

Step 1: Install Laravel 8 App
Step 2: Connecting App to Database
Step 3: Make Routes
Step 4: Create Controller
Step 5: Create Blade File
Step 6: Add Google Chart Library
Step 7: Run Development Server

Step 1: Install Laravel 8 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: Connecting App to Database

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: Make 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

use App\Http\Controllers\GooglePieController;

Route::get('laravel-google-pie-chart', [GooglePieController::class, 'index']);

use App\Http\Controllers\GooglePieController;

Route::get('laravel-google-pie-chart', [GooglePieController::class, 'index']);

Step 4: Create Controller

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

php artisan make:controller GooglePieController

1	php artisan make:controller GooglePieController

Then go to app/http/controller folder and open GooglePieController.php. And put the following code into your GooglePieController.php file:

<?php
   
namespace App\Http\Controllers;
 
use App\Models\User;
 
use Illuminate\Http\Request;
 
Use DB;
 
use Carbon\Carbon;
 
class GooglePieController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
 
          $data['pieChart'] = User::select(\DB::raw("COUNT(*) as count"), \DB::raw("MONTHNAME(created_at) as month_name"))
        ->whereYear('created_at', date('Y'))
        ->groupBy('month_name')
        ->orderBy('count')
        ->get();
    }
 
}

<?php

namespace App\Http\Controllers;

use App\Models\User;

use Illuminate\Http\Request;

Use DB;

use Carbon\Carbon;

class GooglePieController extends Controller

{

/**

* Display a listing of the resource.

* @return \Illuminate\Http\Response

public function index()

{

$data['pieChart'] = User::select(\DB::raw("COUNT(*) as count"), \DB::raw("MONTHNAME(created_at) as month_name"))

->whereYear('created_at', date('Y'))

->groupBy('month_name')

->orderBy('count')

->get();

}

Step 5: Create Blade File

In this step we will create blade view file. Go to /resources/views/ folder and create one blade view file name google-pie-chart.blade.php. And put the following code into your google-pie-chart.blade.php file:

<!doctype html>
<html lang="en">
  <head>
    <title>Laravel 8 Google Pie Chart</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  </head>
  <body>
 
    <div class="container p-5">
        <h5>Laravel 8 Google Pie Chart</h5>
 
        <div id="piechart" style="width: 900px; height: 500px;"></div>
    </div>
 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(drawChart);
 
        function drawChart() {
 
        var data = google.visualization.arrayToDataTable([
            ['Month Name', 'Registered User Count'],
 
                @php
                foreach($pieChart as $d) {
                    echo "['".$d->month_name."', ".$d->count."],";
                }
                @endphp
        ]);
 
          var options = {
            title: 'Users Detail',
            is3D: false,
          };
 
          var chart = new google.visualization.PieChart(document.getElementById('piechart'));
 
          chart.draw(data, options);
        }
      </script>
</body>
</html>

<!doctype html>

<head>

<title>Laravel 8 Google Pie Chart</title>

</head>

<body>

<h5>Laravel 8 Google Pie Chart</h5>

</div>

google.charts.load('current', {'packages':['corechart']});

google.charts.setOnLoadCallback(drawChart);

function drawChart() {

var data = google.visualization.arrayToDataTable([

['Month Name', 'Registered User Count'],

@php

foreach($pieChart as $d) {

echo "['".$d->month_name."', ".$d->count."],";

}

@endphp

]);

var options = {

title: 'Users Detail',

is3D: false,

};

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

chart.draw(data, options);

}

</script>

</body>

</html>

Step 6: Add Google Chart Library

Please remember to add google chart library.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

1	<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

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/laravel-google-pie-chart

1	http://localhost:8000/laravel-google-pie-chart

Laravel 8 Google Bar Chart Tutorial Example

In this Laravel 8 Google Bar Chart Tutorial Example I’ll will show how to use google Bar chart in laravel 8 application. In this tutorial you will learn to implement google Bar char in laravel 8 project. With Google Charts we can visualize data in your laravel web application. In this tutorialI’ll share example to demonstrate use of google Bar chart in laravel 8.

Laravel 8 Google Bar Chart Tutorial Example

In this step by step tutorial I will demonstrate you how to create google Bar char in laravel 8 application. Please follow instruction given below:

Step 1: Install Laravel App
Step 2: Add Database Details
Step 3: Generate Migration & Model File
Step 4: Add Route
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 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 Configuration

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: Generate Migration & Model File

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

php artisan make:model Order -fm

1	php artisan make:model Order -fm

Now, go to app directory and open Order.php file. And put the following code into your Order.php file:

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

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Order extends Model

{

protected $guarded = [];

}

Now, go to database/migrations/ and open create_orders_table.php file and update the following code:

Schema::create('orders', function (Blueprint $table) {
    $table->id();
    $table->string("product_name")->nullable();
    $table->string("product_id")->nullable();
    $table->string("price")->nullable();
    $table->timestamps();
});

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

$table->id();

$table->string("product_name")->nullable();

$table->string("product_id")->nullable();

$table->string("price")->nullable();

$table->timestamps();

});

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

php artisan migrate

1	php artisan migrate

Step 4: Add Route

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

routes/web.php

use App\Http\Controllers\OrderController;

Route::get('google-bar-chart', [OrderController::class, 'index']);

use App\Http\Controllers\OrderController;

Route::get('google-bar-chart', [OrderController::class, 'index']);

Step 5: Create Controller

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

php artisan make:controller OrderController

1	php artisan make:controller OrderController

Then go to app/http/controller folder and open OrderController.php. And put the following code into your OrderController.php file:

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
use App\Models\Order;
 
class OrderController extends Controller
{
    public function index()
    {
       $orders = Order::all();
       return view('google-bar-chart',['orders' => $orders]);   
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Models\Order;

class OrderController extends Controller

{

public function index()

{

$orders = Order::all();

return view('google-bar-chart',['orders' => $orders]);

}

Step 6: Create Blade File

In this step we will create blade file. Go to /resources/views/ folder and create one blade view file name google-bar-chart.blade.php. And add the following code into your google-bar-chart.blade.php file:

<!doctype html>
<html lang="en">
  <head>
    <title>Laravel 8 Google Bar Chart Example Tutorial</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
 
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
 
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
 
</head>
  <body>
    <h2 style="text-align: center;">Laravel 8 Google Bar Charts Example Tutorial</h2>
    <div class="container-fluid p-5">
    <div id="barchart_material" style="width: 100%; height: 500px;"></div>
    </div>
 
    <script type="text/javascript">
 
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawChart);
 
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Order Id', 'Price', 'Product Name'],
 
            @php
              foreach($orders as $order) {
                  echo "['".$order->id."', ".$order->price.", ".$order->Product_name."],";
              }
            @endphp
        ]);
 
        var options = {
          chart: {
            title: 'Bar Graph | Price',
            subtitle: 'Price, and Product Name: @php echo $orders[0]->created_at @endphp',
          },
          bars: 'vertical'
        };
        var chart = new google.charts.Bar(document.getElementById('barchart_material'));
        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
 
</body>
</html>

<!doctype html>

<head>

<title>Laravel 8 Google Bar Chart Example Tutorial</title>

</head>

<body>

<h2 style="text-align: center;">Laravel 8 Google Bar Charts Example Tutorial</h2>

</div>

google.charts.load('current', {'packages':['bar']});

google.charts.setOnLoadCallback(drawChart);

function drawChart() {

var data = google.visualization.arrayToDataTable([

['Order Id', 'Price', 'Product Name'],

@php

foreach($orders as $order) {

echo "['".$order->id."', ".$order->price.", ".$order->Product_name."],";

}

@endphp

]);

var options = {

chart: {

title: 'Bar Graph | Price',

subtitle: 'Price, and Product Name: @php echo $orders[0]->created_at @endphp',

bars: 'vertical'

};

var chart = new google.charts.Bar(document.getElementById('barchart_material'));

chart.draw(data, google.charts.Bar.convertOptions(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://localhost:8000/google-bar-chart

1	http://localhost:8000/google-bar-chart

Instamojo Payment Gateway Integration In Laravel 8

In this Laravel 8 Instamojo Payment Gateway Integration Example tutorial I will show you How to Integrate Instamojo Payment Gateway in Laravel 8. In this tutorial, we will learn how to integrate the instamojo payment gateway in the php laravel 8 application via the instamojo PHP package.

Instamojo Payment Gateway

Instamojo is one of the popular payment gateway, that allows us to accept payment from your customer. Instamojo is very simple, hassle free and easy to integrate payment gateway. Instamojo processes refund payments, collect a payment, create payment are very easy and simple.

Instamojo Payment Gateway Integration In Laravel 8

In this step by step tutorial I will demonstrate you to integrate instamojo payment gateway in the laravel 8 application without using curl APIs. We will simply install instamojo PHP package and integrate into our lastest laravel based application.

Step 1: Install Laravel 8 App
Step 2: Connecting App to Database
Step 3: Install Instamojo PHP package
Step 4: Configure Instamojo Package
Step 5: Make Model and Migration
Step 6: Create Controller
Step 7: Make Routes
Step 8: Create Blade View file
Step 9: Start Development Server

Step 1: Install Laravel 8 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: Connecting App to Database

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 Instamojo PHP package

In this step, we will install Instamojo PHP package via the composer dependency manager. Use the following command to install Instamojo PHP package.

composer require instamojo/instamojo-php

1	composer require instamojo/instamojo-php

Step 4: Configure Instamojo Package

Now, we will put following configuration detail in .env file:

IM_API_KEY=test_d883b3a8d2bc1adc7a535506713
 IM_AUTH_TOKEN=test_dc229039d2232a260a2df3f7502
 IM_URL=https://test.instamojo.com/api/1.1/

IM_API_KEY=test_d883b3a8d2bc1adc7a535506713

IM_AUTH_TOKEN=test_dc229039d2232a260a2df3f7502

IM_URL=https://test.instamojo.com/api/1.1/

Next, Go to the app/config/services.php and put the below code here.

'instamojo' => [

    'api_key'       => env('IM_API_KEY'),

    'auth_token'    => env('IM_AUTH_TOKEN'),

    'url'           => env('IM_URL'),

],

'instamojo' => [

'api_key' => env('IM_API_KEY'),

'auth_token' => env('IM_AUTH_TOKEN'),

'url' => env('IM_URL'),

Step 5: Make Model & Migration

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

php artisan make:model Payment -m

1	php artisan make:model Payment -m

Once above command is executed there will be a migration file created inside database/migrations/ directory, just open migration file and update the function up() method as following:

public function up()
 {
 Schema::create('payments', function (Blueprint $table) {
 $table->increments('id');
 $table->string('i_payment_id');
 $table->string('user_id');
 $table->string('amount');
 $table->timestamps();
 });
 }

public function up()

{

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

$table->increments('id');

$table->string('i_payment_id');

$table->string('user_id');

$table->string('amount');

$table->timestamps();

});

}

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

php artisan migrate

1	php artisan migrate

Step 6: Create Controller

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

php artisan make:controller PayController

1	php artisan make:controller PayController

Go to app/Http/Controller/PayController.php and put the below code :

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
class PayController extends Controller
{
   
   public function index()
   {
        return view('event');
   }
   public function pay(Request $request){
 
     $api = new \Instamojo\Instamojo(
            config('services.instamojo.api_key'),
            config('services.instamojo.auth_token'),
            config('services.instamojo.url')
        );
 
    try {
        $response = $api->paymentRequestCreate(array(
            "purpose" => "FIFA 16",
            "amount" => $request->amount,
            "buyer_name" => "$request->name",
            "send_email" => true,
            "email" => "$request->email",
            "phone" => "$request->mobile_number",
            "redirect_url" => "http://127.0.0.1:8000/pay-success"
            ));
             
            header('Location: ' . $response['longurl']);
            exit();
    }catch (Exception $e) {
        print('Error: ' . $e->getMessage());
    }
 }
 
 public function success(Request $request){
     try {
 
        $api = new \Instamojo\Instamojo(
            config('services.instamojo.api_key'),
            config('services.instamojo.auth_token'),
            config('services.instamojo.url')
        );
 
        $response = $api->paymentRequestStatus(request('payment_request_id'));
 
        if( !isset($response['payments'][0]['status']) ) {
           dd('payment failed');
        } else if($response['payments'][0]['status'] != 'Credit') {
             dd('payment failed');
        } 
      }catch (\Exception $e) {
         dd('payment failed');
     }
    dd($response);
  }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class PayController extends Controller

{

public function index()

{

return view('event');

}

public function pay(Request $request){

$api = new \Instamojo\Instamojo(

config('services.instamojo.api_key'),

config('services.instamojo.auth_token'),

config('services.instamojo.url')

);

try {

$response = $api->paymentRequestCreate(array(

"purpose" => "FIFA 16",

"amount" => $request->amount,

"buyer_name" => "$request->name",

"send_email" => true,

"email" => "$request->email",

"phone" => "$request->mobile_number",

"redirect_url" => "http://127.0.0.1:8000/pay-success"

));

header('Location: ' . $response['longurl']);

exit();

}catch (Exception $e) {

print('Error: ' . $e->getMessage());

}

public function success(Request $request){

try {

$api = new \Instamojo\Instamojo(

config('services.instamojo.api_key'),

config('services.instamojo.auth_token'),

config('services.instamojo.url')

);

$response = $api->paymentRequestStatus(request('payment_request_id'));

if( !isset($response['payments'][0]['status']) ) {

dd('payment failed');

} else if($response['payments'][0]['status'] != 'Credit') {

dd('payment failed');

}

}catch (\Exception $e) {

dd('payment failed');

}

dd($response);

}

Step 7: Make 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

use App\Http\Controllers\PayController;
 
 
Route::get('event', [PayController::class, 'index']);
Route::post('pay', [PayController::class, 'pay']);
Route::get('pay-success', [PayController::class, 'success']);

use App\Http\Controllers\PayController;

Route::get('event', [PayController::class, 'index']);

Route::post('pay', [PayController::class, 'pay']);

Route::get('pay-success', [PayController::class, 'success']);

Step 8: Create Blade View file

In this step we will create blade file. Go to resources/views directory and create blade view file name event.blade.php. Then put the following code into event.blade.php:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Instamojo Payment Gateway Integrate</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet">
<style>
.mt40{
margin-top: 40px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12 mt40">
<div class="card-header" style="background: #0275D8;">
<h2>Register for Event</h2>
</div>
</div>
</div>
@if ($errors->any())
<div class="alert alert-danger">
<strong>Opps!</strong> Something went wrong<br>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form action="{{ url('pay') }}" method="POST" name="laravel_instamojo">
{{ csrf_field() }}
<div class="row">
<div class="col-md-12">
<div class="form-group">
<strong>Name</strong>
<input type="text" name="name" class="form-control" placeholder="Enter Name" required>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<strong>Mobile Number</strong>
<input type="text" name="mobile_number" class="form-control" placeholder="Enter Mobile Number" required>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<strong>Email Id</strong>
<input type="text" name="email" class="form-control" placeholder="Enter Email id" required>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<strong>Event Fees</strong>
<input type="text" name="amount" class="form-control" placeholder="" value="100" readonly="">
</div>
</div>
<div class="col-md-12">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Instamojo Payment Gateway Integrate</title>

<style>

.mt40{

margin-top: 40px;

}

</style>

</head>

<body>

<h2>Register for Event</h2>

</div>

@if ($errors->any())

<strong>Opps!</strong> Something went wrong<br>

<ul>

@foreach ($errors->all() as $error)

<li>{{ $error }}</li>

@endforeach

</ul>

</div>

@endif

</div>

<strong>Mobile Number</strong>

</div>

<strong>Email Id</strong>

</div>

<strong>Event Fees</strong>

</div>

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

</div>

</form>

</div>

</body>

</html>

Step 9: Start 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/event

1	http://localhost:8000/event

Laravel 8 User Roles and Permissions Tutorial Example

In this Laravel 8 user roles and permissions tutorial example I will show you how to implement user roles and permissions system in laravel 8 spatie/laravel-permission package. In this tutorial you will learn to create user roles and permission in laravel 8 application. We will be using spatie/laravel-permission package to create user roles and permission in laravel 8 application. The Spatie role permission package provide way to implement acl in laravel 8 application. With spatie we can create different user roles, user levels with specific permission. With spatie we can assign user role, assign permission to user and assign permission to roles. In this example we will be using bootstrap auth scaffolding for login, register, logout, forget password, profile and reset password page.

Laravel 8 User Roles and Permissions Tutorial Example

In this step by step tutorial I will demonstrate you how to create or assign different user roles and user permission using laravel Spatie package. Please follow instructions given below:

Step 1 – Install Laravel 8 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 Laravel8Auth

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

Step 2 – Database Configuration

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=db name
DB_USERNAME=db user name
DB_PASSWORD=db password

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=db name

DB_USERNAME=db user name

DB_PASSWORD=db password

Step 3 – Install Spatie Composer Packages

In this step, we will install spatie/laravel-permission Package via the composer dependency manager. Use the following command to install spatie/laravel-permission Package.

composer require spatie/laravel-permission

1	composer require spatie/laravel-permission

composer require laravelcollective/html

1	composer require laravelcollective/html

After Installing Image intervention package, we need to add service provider in config/app.php file as following.

'providers' => [	....	Spatie\Permission\PermissionServiceProvider::class,],

1	'providers' => [ .... Spatie\Permission\PermissionServiceProvider::class,],

Now, run the following command to publish spatie package dependencies:

php artisan vendor:publish --provider="Spatie\Permission\PermissionServiceProvider"

1	php artisan vendor:publish --provider="Spatie\Permission\PermissionServiceProvider"

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 Product -m

1	php artisan make:model Product -m

Now, open migration file name create_products_tables.php and add the follwoing code into it:

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

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreateProductsTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

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

$table->id();

$table->string('name');

$table->text('detail');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('products');

}

Now, put the following code into Product.php file:

<?php
   
namespace App\Models;
   
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
   
class Product extends Model
{
    use HasFactory;
   
    /**
     * The attributes that are mass assignable.
     *  
     * @var array
     */
    protected $fillable = [
        'name', 'detail'
    ];
}

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Product extends Model

{

use HasFactory;

/**

* The attributes that are mass assignable.

* @var array

protected $fillable = [

'name', 'detail'

];

}

Then, put the following code into User.php:

<?php
   
namespace App\Models;
   
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Spatie\Permission\Traits\HasRoles;
   
class User extends Authenticatable
{
    use HasFactory, Notifiable, HasRoles;
   
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name',
        'email',
        'password',
    ];
   
    /**
     * The attributes that should be hidden for arrays.
     *
     * @var array
     */
    protected $hidden = [
        'password',
        'remember_token',
    ];
   
    /**
     * The attributes that should be cast to native types.
     *
     * @var array
     */
    protected $casts = [
        'email_verified_at' => 'datetime',
    ];
}

<?php

namespace App\Models;

use Illuminate\Contracts\Auth\MustVerifyEmail;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Foundation\Auth\User as Authenticatable;

use Illuminate\Notifications\Notifiable;

use Spatie\Permission\Traits\HasRoles;

class User extends Authenticatable

{

use HasFactory, Notifiable, HasRoles;

/**

* The attributes that are mass assignable.

* @var array

protected $fillable = [

'name',

'email',

'password',

];

/**

* The attributes that should be hidden for arrays.

* @var array

protected $hidden = [

'password',

'remember_token',

];

/**

* The attributes that should be cast to native types.

* @var array

protected $casts = [

'email_verified_at' => 'datetime',

];

}

Step 5 – Register Middleware

Now we will register a middleare as following

protected $routeMiddleware = [
    ....
    'role' => \Spatie\Permission\Middlewares\RoleMiddleware::class,
    'permission' => \Spatie\Permission\Middlewares\PermissionMiddleware::class,
    'role_or_permission' => \Spatie\Permission\Middlewares\RoleOrPermissionMiddleware::class,
]

protected $routeMiddleware = [

....

'role' => \Spatie\Permission\Middlewares\RoleMiddleware::class,

'permission' => \Spatie\Permission\Middlewares\PermissionMiddleware::class,

'role_or_permission' => \Spatie\Permission\Middlewares\RoleOrPermissionMiddleware::class,

]

Step 6 – Create 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

<?php
   
use Illuminate\Support\Facades\Route;
   
use App\Http\Controllers\HomeController;
use App\Http\Controllers\RoleController;
use App\Http\Controllers\UserController;
use App\Http\Controllers\ProductController;
   
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
   
Route::get('/', function () {
    return view('welcome');
});
   
Auth::routes();
   
Route::get('/home', [HomeController::class, 'index'])->name('home');
   
Route::group(['middleware' => ['auth']], function() {
    Route::resource('roles', RoleController::class);
    Route::resource('users', UserController::class);
    Route::resource('products', ProductController::class);
});

<?php

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\HomeController;

use App\Http\Controllers\RoleController;

use App\Http\Controllers\UserController;

use App\Http\Controllers\ProductController;

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

| Web Routes

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

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

| routes are loaded by the RouteServiceProvider within a group which

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

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

return view('welcome');

});

Auth::routes();

Route::get('/home', [HomeController::class, 'index'])->name('home');

Route::group(['middleware' => ['auth']], function() {

Route::resource('roles', RoleController::class);

Route::resource('users', UserController::class);

Route::resource('products', ProductController::class);

});

Step 7 – Create Controllers

Now, lets create some controller using command given below –

php artisan make controller UserController
php artisan make controller RoleController
php artisan make controller ProductController

php artisan make controller UserController

php artisan make controller RoleController

php artisan make controller ProductController

Then open UserController.php file and add the following code into it, which is placed on app/http/controllers directory:

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Models\User;
use Spatie\Permission\Models\Role;
use DB;
use Hash;
use Illuminate\Support\Arr;
class UserController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index(Request $request)
{
$data = User::orderBy('id','DESC')->paginate(5);
return view('users.index',compact('data'))
->with('i', ($request->input('page', 1) - 1) * 5);
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
$roles = Role::pluck('name','name')->all();
return view('users.create',compact('roles'));
}
/**
* Store a newly created resource in storage.
*
* @param  \Illuminate\Http\Request  $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$this->validate($request, [
'name' => 'required',
'email' => 'required|email|unique:users,email',
'password' => 'required|same:confirm-password',
'roles' => 'required'
]);
$input = $request->all();
$input['password'] = Hash::make($input['password']);
$user = User::create($input);
$user->assignRole($request->input('roles'));
return redirect()->route('users.index')
->with('success','User created successfully');
}
/**
* Display the specified resource.
*
* @param  int  $id
* @return \Illuminate\Http\Response
*/
public function show($id)
{
$user = User::find($id);
return view('users.show',compact('user'));
}
/**
* Show the form for editing the specified resource.
*
* @param  int  $id
* @return \Illuminate\Http\Response
*/
public function edit($id)
{
$user = User::find($id);
$roles = Role::pluck('name','name')->all();
$userRole = $user->roles->pluck('name','name')->all();
return view('users.edit',compact('user','roles','userRole'));
}
/**
* Update the specified resource in storage.
*
* @param  \Illuminate\Http\Request  $request
* @param  int  $id
* @return \Illuminate\Http\Response
*/
public function update(Request $request, $id)
{
$this->validate($request, [
'name' => 'required',
'email' => 'required|email|unique:users,email,'.$id,
'password' => 'same:confirm-password',
'roles' => 'required'
]);
$input = $request->all();
if(!empty($input['password'])){ 
$input['password'] = Hash::make($input['password']);
}else{
$input = Arr::except($input,array('password'));    
}
$user = User::find($id);
$user->update($input);
DB::table('model_has_roles')->where('model_id',$id)->delete();
$user->assignRole($request->input('roles'));
return redirect()->route('users.index')
->with('success','User updated successfully');
}
/**
* Remove the specified resource from storage.
*
* @param  int  $id
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
User::find($id)->delete();
return redirect()->route('users.index')
->with('success','User deleted successfully');
}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Controllers\Controller;

use App\Models\User;

use Spatie\Permission\Models\Role;

use DB;

use Hash;

use Illuminate\Support\Arr;

class UserController extends Controller

{

/**

* Display a listing of the resource.

* @return \Illuminate\Http\Response

public function index(Request $request)

{

$data = User::orderBy('id','DESC')->paginate(5);

return view('users.index',compact('data'))

->with('i', ($request->input('page', 1) - 1) * 5);

}

/**

* Show the form for creating a new resource.

* @return \Illuminate\Http\Response

public function create()

{

$roles = Role::pluck('name','name')->all();

return view('users.create',compact('roles'));

}

/**

* Store a newly created resource in storage.

* @param \Illuminate\Http\Request $request

* @return \Illuminate\Http\Response

public function store(Request $request)

{

$this->validate($request, [

'name' => 'required',

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

'password' => 'required|same:confirm-password',

'roles' => 'required'

]);

$input = $request->all();

$input['password'] = Hash::make($input['password']);

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

$user->assignRole($request->input('roles'));

return redirect()->route('users.index')

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

}

/**

* Display the specified resource.

* @param int $id

* @return \Illuminate\Http\Response

public function show($id)

{

$user = User::find($id);

return view('users.show',compact('user'));

}

/**

* Show the form for editing the specified resource.

* @param int $id

* @return \Illuminate\Http\Response

public function edit($id)

{

$user = User::find($id);

$roles = Role::pluck('name','name')->all();

$userRole = $user->roles->pluck('name','name')->all();

return view('users.edit',compact('user','roles','userRole'));

}

/**

* Update the specified resource in storage.

* @param \Illuminate\Http\Request $request

* @param int $id

* @return \Illuminate\Http\Response

public function update(Request $request, $id)

{

$this->validate($request, [

'name' => 'required',

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

'password' => 'same:confirm-password',

'roles' => 'required'

]);

$input = $request->all();

if(!empty($input['password'])){

$input['password'] = Hash::make($input['password']);

}else{

$input = Arr::except($input,array('password'));

}

$user = User::find($id);

$user->update($input);

DB::table('model_has_roles')->where('model_id',$id)->delete();

$user->assignRole($request->input('roles'));

return redirect()->route('users.index')

->with('success','User updated successfully');

}

/**

* Remove the specified resource from storage.

* @param int $id

* @return \Illuminate\Http\Response

public function destroy($id)

{

User::find($id)->delete();

return redirect()->route('users.index')

->with('success','User deleted successfully');

}

Then open RoleController.php file and add the following code into it, which is placed on app/http/controllers directory:

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Spatie\Permission\Models\Role;
use Spatie\Permission\Models\Permission;
use DB;
class RoleController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
function __construct()
{
$this->middleware('permission:role-list|role-create|role-edit|role-delete', ['only' => ['index','store']]);
$this->middleware('permission:role-create', ['only' => ['create','store']]);
$this->middleware('permission:role-edit', ['only' => ['edit','update']]);
$this->middleware('permission:role-delete', ['only' => ['destroy']]);
}
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index(Request $request)
{
$roles = Role::orderBy('id','DESC')->paginate(5);
return view('roles.index',compact('roles'))
->with('i', ($request->input('page', 1) - 1) * 5);
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
$permission = Permission::get();
return view('roles.create',compact('permission'));
}
/**
* Store a newly created resource in storage.
*
* @param  \Illuminate\Http\Request  $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$this->validate($request, [
'name' => 'required|unique:roles,name',
'permission' => 'required',
]);
$role = Role::create(['name' => $request->input('name')]);
$role->syncPermissions($request->input('permission'));
return redirect()->route('roles.index')
->with('success','Role created successfully');
}
/**
* Display the specified resource.
*
* @param  int  $id
* @return \Illuminate\Http\Response
*/
public function show($id)
{
$role = Role::find($id);
$rolePermissions = Permission::join("role_has_permissions","role_has_permissions.permission_id","=","permissions.id")
->where("role_has_permissions.role_id",$id)
->get();
return view('roles.show',compact('role','rolePermissions'));
}
/**
* Show the form for editing the specified resource.
*
* @param  int  $id
* @return \Illuminate\Http\Response
*/
public function edit($id)
{
$role = Role::find($id);
$permission = Permission::get();
$rolePermissions = DB::table("role_has_permissions")->where("role_has_permissions.role_id",$id)
->pluck('role_has_permissions.permission_id','role_has_permissions.permission_id')
->all();
return view('roles.edit',compact('role','permission','rolePermissions'));
}
/**
* Update the specified resource in storage.
*
* @param  \Illuminate\Http\Request  $request
* @param  int  $id
* @return \Illuminate\Http\Response
*/
public function update(Request $request, $id)
{
$this->validate($request, [
'name' => 'required',
'permission' => 'required',
]);
$role = Role::find($id);
$role->name = $request->input('name');
$role->save();
$role->syncPermissions($request->input('permission'));
return redirect()->route('roles.index')
->with('success','Role updated successfully');
}
/**
* Remove the specified resource from storage.
*
* @param  int  $id
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
DB::table("roles")->where('id',$id)->delete();
return redirect()->route('roles.index')
->with('success','Role deleted successfully');
}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Controllers\Controller;

use Spatie\Permission\Models\Role;

use Spatie\Permission\Models\Permission;

use DB;

class RoleController extends Controller

{

/**

* Display a listing of the resource.

* @return \Illuminate\Http\Response

function __construct()

{

$this->middleware('permission:role-list|role-create|role-edit|role-delete', ['only' => ['index','store']]);

$this->middleware('permission:role-create', ['only' => ['create','store']]);

$this->middleware('permission:role-edit', ['only' => ['edit','update']]);

$this->middleware('permission:role-delete', ['only' => ['destroy']]);

}

/**

* Display a listing of the resource.

* @return \Illuminate\Http\Response

public function index(Request $request)

{

$roles = Role::orderBy('id','DESC')->paginate(5);

return view('roles.index',compact('roles'))

->with('i', ($request->input('page', 1) - 1) * 5);

}

/**

* Show the form for creating a new resource.

* @return \Illuminate\Http\Response

public function create()

{

$permission = Permission::get();

return view('roles.create',compact('permission'));

}

/**

* Store a newly created resource in storage.

* @param \Illuminate\Http\Request $request

* @return \Illuminate\Http\Response

public function store(Request $request)

{

$this->validate($request, [

'name' => 'required|unique:roles,name',

'permission' => 'required',

]);

$role = Role::create(['name' => $request->input('name')]);

$role->syncPermissions($request->input('permission'));

return redirect()->route('roles.index')

->with('success','Role created successfully');

}

/**

* Display the specified resource.

* @param int $id

* @return \Illuminate\Http\Response

public function show($id)

{

$role = Role::find($id);

$rolePermissions = Permission::join("role_has_permissions","role_has_permissions.permission_id","=","permissions.id")

->where("role_has_permissions.role_id",$id)

->get();

return view('roles.show',compact('role','rolePermissions'));

}

/**

* Show the form for editing the specified resource.

* @param int $id

* @return \Illuminate\Http\Response

public function edit($id)

{

$role = Role::find($id);

$permission = Permission::get();

$rolePermissions = DB::table("role_has_permissions")->where("role_has_permissions.role_id",$id)

->pluck('role_has_permissions.permission_id','role_has_permissions.permission_id')

->all();

return view('roles.edit',compact('role','permission','rolePermissions'));

}

/**

* Update the specified resource in storage.

* @param \Illuminate\Http\Request $request

* @param int $id

* @return \Illuminate\Http\Response

public function update(Request $request, $id)

{

$this->validate($request, [

'name' => 'required',

'permission' => 'required',

]);

$role = Role::find($id);

$role->name = $request->input('name');

$role->save();

$role->syncPermissions($request->input('permission'));

return redirect()->route('roles.index')

->with('success','Role updated successfully');

}

/**

* Remove the specified resource from storage.

* @param int $id

* @return \Illuminate\Http\Response

public function destroy($id)

{

DB::table("roles")->where('id',$id)->delete();

return redirect()->route('roles.index')

->with('success','Role deleted successfully');

}

Then open ProductController.php file and add the following code into it, which is placed on app/http/controllers directory:

<?php
namespace App\Http\Controllers;
use App\Models\Product;
use Illuminate\Http\Request;
class ProductController extends Controller
{ 
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
function __construct()
{
$this->middleware('permission:product-list|product-create|product-edit|product-delete', ['only' => ['index','show']]);
$this->middleware('permission:product-create', ['only' => ['create','store']]);
$this->middleware('permission:product-edit', ['only' => ['edit','update']]);
$this->middleware('permission:product-delete', ['only' => ['destroy']]);
}
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$products = Product::latest()->paginate(5);
return view('products.index',compact('products'))
->with('i', (request()->input('page', 1) - 1) * 5);
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
return view('products.create');
}
/**
* Store a newly created resource in storage.
*
* @param  \Illuminate\Http\Request  $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
request()->validate([
'name' => 'required',
'detail' => 'required',
]);
Product::create($request->all());
return redirect()->route('products.index')
->with('success','Product created successfully.');
}
/**
* Display the specified resource.
*
* @param  \App\Product  $product
* @return \Illuminate\Http\Response
*/
public function show(Product $product)
{
return view('products.show',compact('product'));
}
/**
* Show the form for editing the specified resource.
*
* @param  \App\Product  $product
* @return \Illuminate\Http\Response
*/
public function edit(Product $product)
{
return view('products.edit',compact('product'));
}
/**
* Update the specified resource in storage.
*
* @param  \Illuminate\Http\Request  $request
* @param  \App\Product  $product
* @return \Illuminate\Http\Response
*/
public function update(Request $request, Product $product)
{
request()->validate([
'name' => 'required',
'detail' => 'required',
]);
$product->update($request->all());
return redirect()->route('products.index')
->with('success','Product updated successfully');
}
/**
* Remove the specified resource from storage.
*
* @param  \App\Product  $product
* @return \Illuminate\Http\Response
*/
public function destroy(Product $product)
{
$product->delete();
return redirect()->route('products.index')
->with('success','Product deleted successfully');
}
}

100

101

102

103

104

<?php

namespace App\Http\Controllers;

use App\Models\Product;

use Illuminate\Http\Request;

class ProductController extends Controller

{

/**

* Display a listing of the resource.

* @return \Illuminate\Http\Response

function __construct()

{

$this->middleware('permission:product-list|product-create|product-edit|product-delete', ['only' => ['index','show']]);

$this->middleware('permission:product-create', ['only' => ['create','store']]);

$this->middleware('permission:product-edit', ['only' => ['edit','update']]);

$this->middleware('permission:product-delete', ['only' => ['destroy']]);

}

/**

* Display a listing of the resource.

* @return \Illuminate\Http\Response

public function index()

{

$products = Product::latest()->paginate(5);

return view('products.index',compact('products'))

->with('i', (request()->input('page', 1) - 1) * 5);

}

/**

* Show the form for creating a new resource.

* @return \Illuminate\Http\Response

public function create()

{

return view('products.create');

}

/**

* Store a newly created resource in storage.

* @param \Illuminate\Http\Request $request

* @return \Illuminate\Http\Response

public function store(Request $request)

{

request()->validate([

'name' => 'required',

'detail' => 'required',

]);

Product::create($request->all());

return redirect()->route('products.index')

->with('success','Product created successfully.');

}

/**

* Display the specified resource.

* @param \App\Product $product

* @return \Illuminate\Http\Response

public function show(Product $product)

{

return view('products.show',compact('product'));

}

/**

* Show the form for editing the specified resource.

* @param \App\Product $product

* @return \Illuminate\Http\Response

public function edit(Product $product)

{

return view('products.edit',compact('product'));

}

/**

* Update the specified resource in storage.

* @param \Illuminate\Http\Request $request

* @param \App\Product $product

* @return \Illuminate\Http\Response

public function update(Request $request, Product $product)

{

request()->validate([

'name' => 'required',

'detail' => 'required',

]);

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

return redirect()->route('products.index')

->with('success','Product updated successfully');

}

/**

* Remove the specified resource from storage.

* @param \App\Product $product

* @return \Illuminate\Http\Response

public function destroy(Product $product)

{

$product->delete();

return redirect()->route('products.index')

->with('success','Product deleted successfully');

}

Step 8 – Install Laravel UI

In this step we will install laravel UI using following command:

composer require laravel/ui

1	composer require laravel/ui

Step 9 – Install Bootstrap Auth Scaffolding

Now, we will install bootstrap auth scaffolding using following command:

php artisan ui bootstrap --auth

1	php artisan ui bootstrap --auth

Step 10 – Install Npm Packages

Now install npm dependencies using following command:

npm install

1	npm install

Now, open terminal and type the following command on terminal to create tables in database:

php artisan migrate

1	php artisan migrate

Step 11 – Create Blade Views

Now, In this step we will create following blade views file:

Layout
- app.blade.php
Users Module
- index.blade.php create.blade.php edit.blade.php show.blade.php
Roles Module
- index.blade.php create.blade.php edit.blade.php show.blade.php
Product Module
- index.blade.php create.blade.php edit.blade.php show.blade.php

Now, create and open app.blade.php file and add the following code into it, which is places inside resources/views/layouts directory:

<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">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel 8 User Roles and Permissions Tutorial') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light navbar-laravel">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
Laravel 8 User Roles and Permissions
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto"></ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
@guest
<li><a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a></li>
<li><a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a></li>
@else
<li><a class="nav-link" href="{{ route('users.index') }}">Manage Users</a></li>
<li><a class="nav-link" href="{{ route('roles.index') }}">Manage Role</a></li>
<li><a class="nav-link" href="{{ route('products.index') }}">Manage Product</a></li>
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
@csrf
</form>
</div>
</li>
@endguest
</ul>
</div>
</div>
</nav>
<main class="py-4">
<div class="container">
@yield('content')
</div>
</main>
</div>
</body>
</html>

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

<head>

<title>{{ config('app.name', 'Laravel 8 User Roles and Permissions Tutorial') }}</title>

</head>

<body>

Laravel 8 User Roles and Permissions

</a>

</button>

@guest

<li><a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a></li>

<li><a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a></li>

@else

<li><a class="nav-link" href="{{ route('users.index') }}">Manage Users</a></li>

<li><a class="nav-link" href="{{ route('roles.index') }}">Manage Role</a></li>

<li><a class="nav-link" href="{{ route('products.index') }}">Manage Product</a></li>

{{ Auth::user()->name }} <span class="caret"></span>

</a>

<a class="dropdown-item" href="{{ route('logout') }}"

onclick="event.preventDefault();

document.getElementById('logout-form').submit();">

</a>

@csrf

</form>

</div>

</li>

@endguest

</ul>

</div>

</nav>

@yield('content')

</div>

</main>

</div>

</body>

</html>

Then create users directory inside resources/views directory.

Now, create and open index.blade.php file and add the following code into it, which is placed on resources/views/users directory:

@extends('layouts.app')
@section('content')
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-left">
<h2>Users Management</h2>
</div>
<div class="pull-right">
<a class="btn btn-success" href="{{ route('users.create') }}"> Create New User</a>
</div>
</div>
</div>
@if ($message = Session::get('success'))
<div class="alert alert-success">
<p>{{ $message }}</p>
</div>
@endif
<table class="table table-bordered">
<tr>
<th>No</th>
<th>Name</th>
<th>Email</th>
<th>Roles</th>
<th width="280px">Action</th>
</tr>
@foreach ($data as $key => $user)
<tr>
<td>{{ ++$i }}</td>
<td>{{ $user->name }}</td>
<td>{{ $user->email }}</td>
<td>
@if(!empty($user->getRoleNames()))
@foreach($user->getRoleNames() as $v)
<label class="badge badge-success">{{ $v }}</label>
@endforeach
@endif
</td>
<td>
<a class="btn btn-info" href="{{ route('users.show',$user->id) }}">Show</a>
<a class="btn btn-primary" href="{{ route('users.edit',$user->id) }}">Edit</a>
{!! Form::open(['method' => 'DELETE','route' => ['users.destroy', $user->id],'style'=>'display:inline']) !!}
{!! Form::submit('Delete', ['class' => 'btn btn-danger']) !!}
{!! Form::close() !!}
</td>
</tr>
@endforeach
</table>
{!! $data->render() !!}
<p class="text-center text-primary"><small></small></p>
@endsection

@extends('layouts.app')

@section('content')

<h2>Users Management</h2>

</div>

<a class="btn btn-success" href="{{ route('users.create') }}"> Create New User</a>

</div>

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

<p>{{ $message }}</p>

</div>

@endif

<tr>

<th>Email</th>

<th>Roles</th>

<th width="280px">Action</th>

</tr>

@foreach ($data as $key => $user)

<tr>

<td>{{ $user->email }}</td>

<td>

@if(!empty($user->getRoleNames()))

@foreach($user->getRoleNames() as $v)

@endforeach

@endif

</td>

<td>

{!! Form::open(['method' => 'DELETE','route' => ['users.destroy', $user->id],'style'=>'display:inline']) !!}

{!! Form::submit('Delete', ['class' => 'btn btn-danger']) !!}

{!! Form::close() !!}

</td>

</tr>

@endforeach

</table>

{!! $data->render() !!}

@endsection

Now, create and open create.blade.php file and add the following code into it, which is placed on resources/views/users directory:

@extends('layouts.app')
@section('content')
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-left">
<h2>Create New User</h2>
</div>
<div class="pull-right">
<a class="btn btn-primary" href="{{ route('users.index') }}"> Back</a>
</div>
</div>
</div>
@if (count($errors) > 0)
<div class="alert alert-danger">
<strong>Whoops!</strong> There were some problems with your input.<br><br>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
{!! Form::open(array('route' => 'users.store','method'=>'POST')) !!}
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Name:</strong>
{!! Form::text('name', null, array('placeholder' => 'Name','class' => 'form-control')) !!}
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Email:</strong>
{!! Form::text('email', null, array('placeholder' => 'Email','class' => 'form-control')) !!}
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Password:</strong>
{!! Form::password('password', array('placeholder' => 'Password','class' => 'form-control')) !!}
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Confirm Password:</strong>
{!! Form::password('confirm-password', array('placeholder' => 'Confirm Password','class' => 'form-control')) !!}
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Role:</strong>
{!! Form::select('roles[]', $roles,[], array('class' => 'form-control','multiple')) !!}
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
{!! Form::close() !!}
<p class="text-center text-primary"><small></small></p>
@endsection

@extends('layouts.app')

@section('content')

<h2>Create New User</h2>

</div>

</div>

@if (count($errors) > 0)

<strong>Whoops!</strong> There were some problems with your input.<br><br>

<ul>

@foreach ($errors->all() as $error)

<li>{{ $error }}</li>

@endforeach

</ul>

</div>

@endif

{!! Form::open(array('route' => 'users.store','method'=>'POST')) !!}

{!! Form::text('name', null, array('placeholder' => 'Name','class' => 'form-control')) !!}

</div>

<strong>Email:</strong>

{!! Form::text('email', null, array('placeholder' => 'Email','class' => 'form-control')) !!}

</div>

<strong>Password:</strong>

{!! Form::password('password', array('placeholder' => 'Password','class' => 'form-control')) !!}

</div>

<strong>Confirm Password:</strong>

{!! Form::password('confirm-password', array('placeholder' => 'Confirm Password','class' => 'form-control')) !!}

</div>

{!! Form::select('roles[]', $roles,[], array('class' => 'form-control','multiple')) !!}

</div>

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

</div>

{!! Form::close() !!}

@endsection

Now, create and open edit.blade.php file and add the following code into it, which is placed on resources/views/users directory:

@extends('layouts.app')
@section('content')
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-left">
<h2>Edit New User</h2>
</div>
<div class="pull-right">
<a class="btn btn-primary" href="{{ route('users.index') }}"> Back</a>
</div>
</div>
</div>
@if (count($errors) > 0)
<div class="alert alert-danger">
<strong>Whoops!</strong> There were some problems with your input.<br><br>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
{!! Form::model($user, ['method' => 'PATCH','route' => ['users.update', $user->id]]) !!}
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Name:</strong>
{!! Form::text('name', null, array('placeholder' => 'Name','class' => 'form-control')) !!}
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Email:</strong>
{!! Form::text('email', null, array('placeholder' => 'Email','class' => 'form-control')) !!}
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Password:</strong>
{!! Form::password('password', array('placeholder' => 'Password','class' => 'form-control')) !!}
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Confirm Password:</strong>
{!! Form::password('confirm-password', array('placeholder' => 'Confirm Password','class' => 'form-control')) !!}
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Role:</strong>
{!! Form::select('roles[]', $roles,$userRole, array('class' => 'form-control','multiple')) !!}
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
{!! Form::close() !!}
<p class="text-center text-primary"><small></small></p>
@endsection

@extends('layouts.app')

@section('content')

</div>

</div>

@if (count($errors) > 0)

<strong>Whoops!</strong> There were some problems with your input.<br><br>

<ul>

@foreach ($errors->all() as $error)

<li>{{ $error }}</li>

@endforeach

</ul>

</div>

@endif

{!! Form::model($user, ['method' => 'PATCH','route' => ['users.update', $user->id]]) !!}

{!! Form::text('name', null, array('placeholder' => 'Name','class' => 'form-control')) !!}

</div>

<strong>Email:</strong>

{!! Form::text('email', null, array('placeholder' => 'Email','class' => 'form-control')) !!}

</div>

<strong>Password:</strong>

{!! Form::password('password', array('placeholder' => 'Password','class' => 'form-control')) !!}

</div>

<strong>Confirm Password:</strong>

{!! Form::password('confirm-password', array('placeholder' => 'Confirm Password','class' => 'form-control')) !!}

</div>

{!! Form::select('roles[]', $roles,$userRole, array('class' => 'form-control','multiple')) !!}

</div>

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

</div>

{!! Form::close() !!}

@endsection

Now, create and open show.blade.php file and add the following code into it, which is placed on resources/views/users directory:

@extends('layouts.app')
@section('content')
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-left">
<h2> Show User</h2>
</div>
<div class="pull-right">
<a class="btn btn-primary" href="{{ route('users.index') }}"> Back</a>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Name:</strong>
{{ $user->name }}
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Email:</strong>
{{ $user->email }}
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Roles:</strong>
@if(!empty($user->getRoleNames()))
@foreach($user->getRoleNames() as $v)
<label class="badge badge-success">{{ $v }}</label>
@endforeach
@endif
</div>
</div>
</div>
@endsection

@extends('layouts.app')

@section('content')

</div>

</div>

</div>

<strong>Email:</strong>

</div>

<strong>Roles:</strong>

@if(!empty($user->getRoleNames()))

@foreach($user->getRoleNames() as $v)

@endforeach

@endif

</div>

@endsection

@extends('layouts.app')
@section('content')
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-left">
<h2> Show User</h2>
</div>
<div class="pull-right">
<a class="btn btn-primary" href="{{ route('users.index') }}"> Back</a>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Name:</strong>
{{ $user->name }}
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Email:</strong>
{{ $user->email }}
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Roles:</strong>
@if(!empty($user->getRoleNames()))
@foreach($user->getRoleNames() as $v)
<label class="badge badge-success">{{ $v }}</label>
@endforeach
@endif
</div>
</div>
</div>
@endsection

@extends('layouts.app')

@section('content')

</div>

</div>

</div>

<strong>Email:</strong>

</div>

<strong>Roles:</strong>

@if(!empty($user->getRoleNames()))

@foreach($user->getRoleNames() as $v)

@endforeach

@endif

</div>

@endsection

Now, create Roles directory inside resources/views directory.

Now, create and open index.blade.php file and add the following code into it, which is placed on resources/views/roles directory:

@extends('layouts.app')
@section('content')
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-left">
<h2>Role Management</h2>
</div>
<div class="pull-right">
@can('role-create')
<a class="btn btn-success" href="{{ route('roles.create') }}"> Create New Role</a>
@endcan
</div>
</div>
</div>
@if ($message = Session::get('success'))
<div class="alert alert-success">
<p>{{ $message }}</p>
</div>
@endif
<table class="table table-bordered">
<tr>
<th>No</th>
<th>Name</th>
<th width="280px">Action</th>
</tr>
@foreach ($roles as $key => $role)
<tr>
<td>{{ ++$i }}</td>
<td>{{ $role->name }}</td>
<td>
<a class="btn btn-info" href="{{ route('roles.show',$role->id) }}">Show</a>
@can('role-edit')
<a class="btn btn-primary" href="{{ route('roles.edit',$role->id) }}">Edit</a>
@endcan
@can('role-delete')
{!! Form::open(['method' => 'DELETE','route' => ['roles.destroy', $role->id],'style'=>'display:inline']) !!}
{!! Form::submit('Delete', ['class' => 'btn btn-danger']) !!}
{!! Form::close() !!}
@endcan
</td>
</tr>
@endforeach
</table>
{!! $roles->render() !!}
<p class="text-center text-primary"><small></small></p>
@endsection

@extends('layouts.app')

@section('content')

<h2>Role Management</h2>

</div>

@can('role-create')

<a class="btn btn-success" href="{{ route('roles.create') }}"> Create New Role</a>

@endcan

</div>

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

<p>{{ $message }}</p>

</div>

@endif

<tr>

<th width="280px">Action</th>

</tr>

@foreach ($roles as $key => $role)

<tr>

<td>

@can('role-edit')

@endcan

@can('role-delete')

{!! Form::open(['method' => 'DELETE','route' => ['roles.destroy', $role->id],'style'=>'display:inline']) !!}

{!! Form::submit('Delete', ['class' => 'btn btn-danger']) !!}

{!! Form::close() !!}

@endcan

</td>

</tr>

@endforeach

</table>

{!! $roles->render() !!}

@endsection

Now, create and open create.blade.php file and add the following code into it, which is placed on resources/views/roles directory:

@extends('layouts.app')
@section('content')
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-left">
<h2>Create New Role</h2>
</div>
<div class="pull-right">
<a class="btn btn-primary" href="{{ route('roles.index') }}"> Back</a>
</div>
</div>
</div>
@if (count($errors) > 0)
<div class="alert alert-danger">
<strong>Whoops!</strong> There were some problems with your input.<br><br>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
{!! Form::open(array('route' => 'roles.store','method'=>'POST')) !!}
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Name:</strong>
{!! Form::text('name', null, array('placeholder' => 'Name','class' => 'form-control')) !!}
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Permission:</strong>
<br/>
@foreach($permission as $value)
<label>{{ Form::checkbox('permission[]', $value->id, false, array('class' => 'name')) }}
{{ $value->name }}</label>
<br/>
@endforeach
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
{!! Form::close() !!}
<p class="text-center text-primary"><small></small></p>
@endsection

@extends('layouts.app')

@section('content')

<h2>Create New Role</h2>

</div>

</div>

@if (count($errors) > 0)

<strong>Whoops!</strong> There were some problems with your input.<br><br>

<ul>

@foreach ($errors->all() as $error)

<li>{{ $error }}</li>

@endforeach

</ul>

</div>

@endif

{!! Form::open(array('route' => 'roles.store','method'=>'POST')) !!}

{!! Form::text('name', null, array('placeholder' => 'Name','class' => 'form-control')) !!}

</div>

<strong>Permission:</strong>

<br/>

@foreach($permission as $value)

<label>{{ Form::checkbox('permission[]', $value->id, false, array('class' => 'name')) }}

{{ $value->name }}</label>

<br/>

@endforeach

</div>

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

</div>

{!! Form::close() !!}

@endsection

Now, create and open edit.blade.php file and add the following code into it, which is placed on resources/views/roles directory:

@extends('layouts.app')
@section('content')
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-left">
<h2>Edit Role</h2>
</div>
<div class="pull-right">
<a class="btn btn-primary" href="{{ route('roles.index') }}"> Back</a>
</div>
</div>
</div>
@if (count($errors) > 0)
<div class="alert alert-danger">
<strong>Whoops!</strong> There were some problems with your input.<br><br>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
{!! Form::model($role, ['method' => 'PATCH','route' => ['roles.update', $role->id]]) !!}
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Name:</strong>
{!! Form::text('name', null, array('placeholder' => 'Name','class' => 'form-control')) !!}
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Permission:</strong>
<br/>
@foreach($permission as $value)
<label>{{ Form::checkbox('permission[]', $value->id, in_array($value->id, $rolePermissions) ? true : false, array('class' => 'name')) }}
{{ $value->name }}</label>
<br/>
@endforeach
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
{!! Form::close() !!}
@endsection
<p class="text-center text-primary"><small></small></p>

@extends('layouts.app')

@section('content')

</div>

</div>

@if (count($errors) > 0)

<strong>Whoops!</strong> There were some problems with your input.<br><br>

<ul>

@foreach ($errors->all() as $error)

<li>{{ $error }}</li>

@endforeach

</ul>

</div>

@endif

{!! Form::model($role, ['method' => 'PATCH','route' => ['roles.update', $role->id]]) !!}

{!! Form::text('name', null, array('placeholder' => 'Name','class' => 'form-control')) !!}

</div>

<strong>Permission:</strong>

<br/>

@foreach($permission as $value)

<label>{{ Form::checkbox('permission[]', $value->id, in_array($value->id, $rolePermissions) ? true : false, array('class' => 'name')) }}

{{ $value->name }}</label>

<br/>

@endforeach

</div>

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

</div>

{!! Form::close() !!}

@endsection

Now, create and open show.blade.php file and add the following code into it, which is placed on resources/views/roles directory:

@extends('layouts.app')
@section('content')
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-left">
<h2> Show Role</h2>
</div>
<div class="pull-right">
<a class="btn btn-primary" href="{{ route('roles.index') }}"> Back</a>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Name:</strong>
{{ $role->name }}
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Permissions:</strong>
@if(!empty($rolePermissions))
@foreach($rolePermissions as $v)
<label class="label label-success">{{ $v->name }},</label>
@endforeach
@endif
</div>
</div>
</div>
@endsection

@extends('layouts.app')

@section('content')

</div>

</div>

</div>

<strong>Permissions:</strong>

@if(!empty($rolePermissions))

@foreach($rolePermissions as $v)

@endforeach

@endif

</div>

@endsection

Then create Product directory inside resources/views directory.

Now, create and open index.blade.php file and add the following code into it, which is placed on resources/views/product directory:

@extends('layouts.app')
@section('content')
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-left">
<h2>Products</h2>
</div>
<div class="pull-right">
@can('product-create')
<a class="btn btn-success" href="{{ route('products.create') }}"> Create New Product</a>
@endcan
</div>
</div>
</div>
@if ($message = Session::get('success'))
<div class="alert alert-success">
<p>{{ $message }}</p>
</div>
@endif
<table class="table table-bordered">
<tr>
<th>No</th>
<th>Name</th>
<th>Details</th>
<th width="280px">Action</th>
</tr>
@foreach ($products as $product)
<tr>
<td>{{ ++$i }}</td>
<td>{{ $product->name }}</td>
<td>{{ $product->detail }}</td>
<td>
<form action="{{ route('products.destroy',$product->id) }}" method="POST">
<a class="btn btn-info" href="{{ route('products.show',$product->id) }}">Show</a>
@can('product-edit')
<a class="btn btn-primary" href="{{ route('products.edit',$product->id) }}">Edit</a>
@endcan
@csrf
@method('DELETE')
@can('product-delete')
<button type="submit" class="btn btn-danger">Delete</button>
@endcan
</form>
</td>
</tr>
@endforeach
</table>
{!! $products->links() !!}
<p class="text-center text-primary"><small></small></p>
@endsection

@extends('layouts.app')

@section('content')

<h2>Products</h2>

</div>

@can('product-create')

<a class="btn btn-success" href="{{ route('products.create') }}"> Create New Product</a>

@endcan

</div>

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

<p>{{ $message }}</p>

</div>

@endif

<tr>

<th>Details</th>

<th width="280px">Action</th>

</tr>

@foreach ($products as $product)

<tr>

<td>{{ $product->name }}</td>

<td>{{ $product->detail }}</td>

<td>

<form action="{{ route('products.destroy',$product->id) }}" method="POST">

@can('product-edit')

@endcan

@csrf

@method('DELETE')

@can('product-delete')

<button type="submit" class="btn btn-danger">Delete</button>

@endcan

</form>

</td>

</tr>

@endforeach

</table>

{!! $products->links() !!}

@endsection

Now, create and open create.blade.php file and add the following code into it, which is placed on resources/views/product directory:

@extends('layouts.app')
@section('content')
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-left">
<h2>Add New Product</h2>
</div>
<div class="pull-right">
<a class="btn btn-primary" href="{{ route('products.index') }}"> Back</a>
</div>
</div>
</div>
@if ($errors->any())
<div class="alert alert-danger">
<strong>Whoops!</strong> There were some problems with your input.<br><br>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form action="{{ route('products.store') }}" method="POST">
@csrf
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Name:</strong>
<input type="text" name="name" class="form-control" placeholder="Name">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Detail:</strong>
<textarea class="form-control" style="height:150px" name="detail" placeholder="Detail"></textarea>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
<p class="text-center text-primary"><small></small></p>
@endsection

@extends('layouts.app')

@section('content')

<h2>Add New Product</h2>

</div>

</div>

@if ($errors->any())

<strong>Whoops!</strong> There were some problems with your input.<br><br>

<ul>

@foreach ($errors->all() as $error)

<li>{{ $error }}</li>

@endforeach

</ul>

</div>

@endif

@csrf

</div>

<strong>Detail:</strong>

</div>

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

</div>

</form>

@endsection

Now, create and open edit.blade.php file and add the following code into it, which is placed on resources/views/product directory:

@extends('layouts.app')
@section('content')
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-left">
<h2>Edit Product</h2>
</div>
<div class="pull-right">
<a class="btn btn-primary" href="{{ route('products.index') }}"> Back</a>
</div>
</div>
</div>
@if ($errors->any())
<div class="alert alert-danger">
<strong>Whoops!</strong> There were some problems with your input.<br><br>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form action="{{ route('products.update',$product->id) }}" method="POST">
@csrf
@method('PUT')
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Name:</strong>
<input type="text" name="name" value="{{ $product->name }}" class="form-control" placeholder="Name">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Detail:</strong>
<textarea class="form-control" style="height:150px" name="detail" placeholder="Detail">{{ $product->detail }}</textarea>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
<p class="text-center text-primary"><small></small></p>
@endsection

@extends('layouts.app')

@section('content')

<h2>Edit Product</h2>

</div>

</div>

@if ($errors->any())

<strong>Whoops!</strong> There were some problems with your input.<br><br>

<ul>

@foreach ($errors->all() as $error)

<li>{{ $error }}</li>

@endforeach

</ul>

</div>

@endif

<form action="{{ route('products.update',$product->id) }}" method="POST">

@csrf

@method('PUT')

<input type="text" name="name" value="{{ $product->name }}" class="form-control" placeholder="Name">

</div>

<strong>Detail:</strong>

<textarea class="form-control" style="height:150px" name="detail" placeholder="Detail">{{ $product->detail }}</textarea>

</div>

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

</div>

</form>

@endsection

Now, create and open show.blade.php file and add the following code into it, which is placed on resources/views/product directory:

@extends('layouts.app')
@section('content')
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-left">
<h2> Show Product</h2>
</div>
<div class="pull-right">
<a class="btn btn-primary" href="{{ route('products.index') }}"> Back</a>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Name:</strong>
{{ $product->name }}
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Details:</strong>
{{ $product->detail }}
</div>
</div>
</div>
@endsection
<p class="text-center text-primary"><small></small></p>

@extends('layouts.app')

@section('content')

<h2> Show Product</h2>

</div>

</div>

</div>

<strong>Details:</strong>

</div>

@endsection

Step 12 – 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/

1	http://127.0.0.1:8000/

Laravel 8 Livewire Add or Remove Dynamically Input Fields Tutorial

In this Laravel 8 Livewire Add or Remove Dynamically Input Fields Tutorial I’ll show you how to add or remove input fields dynamically using livewire in laravel 8. In this tutorial you will learn to create add or remove input fields dynamically using livewire in laravel 8 application. In this article I will share example to add or remove input fields dynamically using livewire in laravel 8 application

Laravel 8 Livewire Add or Remove Dynamically Input Fields Tutorial

In this step by step tutorial I will demonstrate you how to add or remove input fields dynamically using livewire in laravel 8 application. Please follow the instruction given below:

Step 1: Install Laravel 8 App
Step 2: Connecting App to Database
Step 3: Create Model & Migration using Artisan
Step 4: Install Livewire Package
Step 5: Build Livewire Component using Artisan
Step 6: Create Route
Step 7: Create View File
Step 8: Run Development Server

Step 1: Install Laravel 8 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: Connecting App to Database

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 Migration

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

 php artisan make:model Employee -m

1	php artisan make:model Employee -m

The above command will create a model name Employee.php, and create a migration that name create_employees_table.php. Go to database/migrations folder and open create_ employees_table.php file. Then put the following code into create_ employees_table.php file:

public function up()
{
    Schema::create('employees', function (Blueprint $table) {
        $table->bigIncrements('id');
        $table->string('name');
        $table->string('email');
        $table->timestamps();
    });
}

public function up()

{

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

$table->bigIncrements('id');

$table->string('name');

$table->string('email');

$table->timestamps();

});

}

Next, open your command prompt and run the following command to create the table into your database:

php artisan migrate

1	php artisan migrate

Now, go to app/Models/ directory and open Employee.php file. Then put the following code into it:

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

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Employee extends Model

{

use HasFactory;

protected $guarded = [];

}

Step 4: Install Livewire Package

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

composer require livewire/livewire

1	composer require livewire/livewire

Step 5: Build Livewire Component using Artisan

In this step we will create a component using following artisan command:

php artisan make:livewire employees

1	php artisan make:livewire employees

The above command will create a components on the following path:

app/Http/Livewire/Employees.php
resources/views/livewire/employees.blade.php

1 2	app/Http/Livewire/Employees.php resources/views/livewire/employees.blade.php

Now, go to app/Http/Livewire folder and open Employees.php file. Then add the following code into your Employees.php file:

<?php
 
namespace App\Http\Livewire;
 
use Livewire\Component;
use App\Employee;
use App\Http\Livewire\Field;
use Illuminate\Http\Request;
 
class Employees extends Component
{
    public $employees, $name, $email, $employee_id;
    public $updateMode = false;
    public $inputs = [];
    public $i = 1;
 
    public function add($i)
    {
        $i = $i + 1;
        $this->i = $i;
        array_push($this->inputs ,$i);
    }
 
    public function remove($i)
    {
        unset($this->inputs[$i]);
    }
 
    public function render()
    {
        $this->employees = Employee::all();
        return view('livewire.employees');
    }
 
    private function resetInputFields(){
        $this->name = '';
        $this->email = '';
    }
 
    public function store()
    {
        $validatedDate = $this->validate([
                'name.0' => 'required',
                'email.0' => 'required',
                'name.*' => 'required',
                'email.*' => 'required|email',
            ],
            [
                'name.0.required' => 'name field is required',
                'email.0.required' => 'email field is required',
            'email.0.email' => 'The email must be a valid email address.',
                'name.*.required' => 'name field is required',
                'email.*.required' => 'email field is required',
                'email.*.email' => 'The email must be a valid email address.',
            ]
        );
 
        foreach ($this->name as $key => $value) {
            Employee::create(['name' => $this->name[$key], 'email' => $this->email[$key]]);
        }
 
        $this->inputs = [];
 
        $this->resetInputFields();
 
        session()->flash('message', 'Employee Has Been Created Successfully.');
    }
}

<?php

namespace App\Http\Livewire;

use Livewire\Component;

use App\Employee;

use App\Http\Livewire\Field;

use Illuminate\Http\Request;

class Employees extends Component

{

public $employees, $name, $email, $employee_id;

public $updateMode = false;

public $inputs = [];

public $i = 1;

public function add($i)

{

$i = $i + 1;

$this->i = $i;

array_push($this->inputs ,$i);

}

public function remove($i)

{

unset($this->inputs[$i]);

}

public function render()

{

$this->employees = Employee::all();

return view('livewire.employees');

}

private function resetInputFields(){

$this->name = '';

$this->email = '';

}

public function store()

{

$validatedDate = $this->validate([

'name.0' => 'required',

'email.0' => 'required',

'name.*' => 'required',

'email.*' => 'required|email',

[

'name.0.required' => 'name field is required',

'email.0.required' => 'email field is required',

'email.0.email' => 'The email must be a valid email address.',

'name.*.required' => 'name field is required',

'email.*.required' => 'email field is required',

'email.*.email' => 'The email must be a valid email address.',

]

);

foreach ($this->name as $key => $value) {

Employee::create(['name' => $this->name[$key], 'email' => $this->email[$key]]);

}

$this->inputs = [];

$this->resetInputFields();

session()->flash('message', 'Employee Has Been Created Successfully.');

}

Now, go to resources/views/livewire folder and open employees.blade.php file. Then put the following code into your employees.blade.php file:

<div>
@if (session()->has('message'))
<div class="alert alert-success">
{{ session('message') }}
</div>
@endif
<form>
<div class=" add-input">
<div class="row">
<div class="col-md-5">
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter Name" wire:model="name.0">
@error('name.0') <span class="text-danger error">{{ $message }}</span>@enderror
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<input type="email" class="form-control" wire:model="email.0" placeholder="Enter Email">
@error('email.0') <span class="text-danger error">{{ $message }}</span>@enderror
</div>
</div>
<div class="col-md-2">
<button class="btn text-white btn-info btn-sm" wire:click.prevent="add({{$i}})">Add</button>
</div>
</div>
</div>
@foreach($inputs as $key => $value)
<div class=" add-input">
<div class="row">
<div class="col-md-5">
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter Name" wire:model="name.{{ $value }}">
@error('name.'.$value) <span class="text-danger error">{{ $message }}</span>@enderror
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<input type="email" class="form-control" wire:model="email.{{ $value }}" placeholder="Enter Email">
@error('email.'.$value) <span class="text-danger error">{{ $message }}</span>@enderror
</div>
</div>
<div class="col-md-2">
<button class="btn btn-danger btn-sm" wire:click.prevent="remove({{$key}})">remove</button>
</div>
</div>
</div>
@endforeach
<div class="row">
<div class="col-md-12">
<button type="button" wire:click.prevent="store()" class="btn btn-success btn-sm">Save</button>
</div>
</div>
</form>
</div>

<div>

@if (session()->has('message'))

</div>

@endif

<form>

@error('name.0') <span class="text-danger error">{{ $message }}</span>@enderror

</div>

@error('email.0') <span class="text-danger error">{{ $message }}</span>@enderror

</div>

</div>

@foreach($inputs as $key => $value)

@error('name.'.$value) <span class="text-danger error">{{ $message }}</span>@enderror

</div>

@error('email.'.$value) <span class="text-danger error">{{ $message }}</span>@enderror

</div>

<button class="btn btn-danger btn-sm" wire:click.prevent="remove({{$key}})">remove</button>

</div>

@endforeach

</div>

</form>

</div>

Step 6: Create Route

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

routes/web.php

Route::get('/employees', function () {
return view('home');
});

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

return view('home');

});

Step 7: Create View File

In this step we will create view file. Go to resources/views/ folder and create one blade view files that name home.blade.php file. Then add the following code into your home.blade.php file:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel Livewire 8 Dynamically Add/Remove Input Fields</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css">
<!-- Styles -->
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'Nunito', sans-serif;
font-weight: 200;
height: 100vh;
margin: 0;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.content {
text-align: center;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 0 25px;
font-size: 13px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.m-b-md {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="container mt-5">
<div class="row mt-5 justify-content-center">
<div class="mt-5 col-md-8">
<div class="card">
<div class="card-header bg-success text-white"><h5 style="font-size: 19px;">Laravel Livewire 8 Dynamically Add/Remove Input Fields - w3adda.com</h5></div>
<div class="card-body">
@livewire('employees')
</div>
</div>
</div>
</div>
</div>
@livewireScripts
</body>
</html>

<!DOCTYPE html>

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

<head>

<title>Laravel Livewire 8 Dynamically Add/Remove Input Fields</title>

<style>

html, body {

background-color: #fff;

color: #636b6f;

font-family: 'Nunito', sans-serif;

font-weight: 200;

height: 100vh;

margin: 0;

}

.full-height {

height: 100vh;

}

.flex-center {

align-items: center;

display: flex;

justify-content: center;

}

.position-ref {

position: relative;

}

.top-right {

position: absolute;

right: 10px;

top: 18px;

}

.content {

text-align: center;

}

.title {

font-size: 84px;

}

.links > a {

color: #636b6f;

padding: 0 25px;

font-size: 13px;

font-weight: 600;

letter-spacing: .1rem;

text-decoration: none;

text-transform: uppercase;

}

.m-b-md {

margin-bottom: 30px;

}

</style>

</head>

<body>

<div class="card-header bg-success text-white"><h5 style="font-size: 19px;">Laravel Livewire 8 Dynamically Add/Remove Input Fields - w3adda.com</h5></div>

@livewire('employees')

</div>

@livewireScripts

</body>

</html>

Step 8: 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/employees

1	http://localhost:8000/employees

Laravel 8 Dynamically Add or Remove Multiple Input Fields using jQuery

In this Laravel 8 Dynamically Add or Remove Multiple Input Fields using jQuery tutorial I’ll show you how to dynamically add or remove multiple input field in form using jQuery in laravel 8. In this tutorial you will learn to dynamically add or remove multiple input field in form using jquery in laravel 8. In this tutorial I’ll share example to demonstrate Dynamically Add or Remove multiple Input Fields jQuery.

Laravel 8 Dynamically Add or Remove Multiple Input Fields using jQuery

In this step by step tutorial we will learn to dynamically add or remove multiple input field in form using jQuery in laravel 8. Please follow the instruction given below:

Step 1: Install Laravel 8 App
Step 2: Connecting App to Database
Step 3: Build Migration & Model
Step 4: Add Routes
Step 5: Create Controller by Artisan
Step 6: Create Blade View
Step 7: Run Development Server
Step 8: Test App On Browser

Step 1: Install Laravel 8 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: Connecting App to Database

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: Build Migration & Model

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

php artisan make:model Todo -m

1	php artisan make:model Todo -m

Now, go to database/migrations folder and open create_todos_table.php. Then put the following code into create_todos_table.php:

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

public function up()

{

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

$table->id();

$table->string('title');

$table->timestamps();

});

}

Then open Todo.php file and the fillable property, which is placed on app/models directory:

<?php
 
namespace App\Models;
 
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
 
class Todo extends Model
{   
    use HasFactory;
    protected $fillable = [
        'title'
    ];
}

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Todo extends Model

{

use HasFactory;

protected $fillable = [

'title'

];

}

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

php artisan migrate

1	php artisan migrate

Step 4: Create Route

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

routes/web.php

use App\Http\Controllers\DynamicAddRemoveFieldController;
 
Route::get('add-remove-multiple-input-fields', [DynamicAddRemoveFieldController::class, 'index']);
Route::post('add-remove-multiple-input-fields', [DynamicAddRemoveFieldController::class, 'store']);

use App\Http\Controllers\DynamicAddRemoveFieldController;

Route::get('add-remove-multiple-input-fields', [DynamicAddRemoveFieldController::class, 'index']);

Route::post('add-remove-multiple-input-fields', [DynamicAddRemoveFieldController::class, 'store']);

Step 5: Create Controller by Artisan

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

php artisan make:controller DynamicAddRemoveFieldController

1	php artisan make:controller DynamicAddRemoveFieldController

This command will create a controller named DynamicAddRemoveFieldController.php file.

Next, Navigate to app/http/controllers/ folder and open DynamicAddRemoveFieldController.php. Then add the following file uploading methods into your DynamicAddRemoveFieldController.php file:

<?php
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
use App\Models\Todo;
 
use Illuminate\Support\Facades\Validator;
 
class DynamicAddRemoveFieldController extends Controller
{
    public function index() 
    {
        return view("add-remove-input-fields");
    }
    public function store(Request $request)
    {
        $request->validate([
            'moreFields.*.title' => 'required'
        ]);
     
        foreach ($request->moreFields as $key => $value) {
            Todo::create($value);
        }
     
        return back()->with('success', 'Todos Has Been Created Successfully.');
    }
 
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Models\Todo;

use Illuminate\Support\Facades\Validator;

class DynamicAddRemoveFieldController extends Controller

{

public function index()

{

return view("add-remove-input-fields");

}

public function store(Request $request)

{

$request->validate([

'moreFields.*.title' => 'required'

]);

foreach ($request->moreFields as $key => $value) {

Todo::create($value);

}

return back()->with('success', 'Todos Has Been Created Successfully.');

}

Step 6: Create Blade View

In this step, we will create a blade view file named add-remove-multiple-input-fields.blade.php. Now, go to resources/views and create one file name add-remove-multiple-input-fields.blade.php Then put the following code into your add-remove-multiple-input-fields.blade.php file:

<!DOCTYPE html>
<html>
<head>
<title>Laravel 8 - Add/remove multiple input fields dynamically using Jquery</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js"></script>
<meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body>
<div class="container">
<div class="card mt-3">
<div class="card-header"><h2>Add/remove Multiple Input Todo Fields Dynamically using Jquery In Laravel 8</h2></div>
<div class="card-body">
<form action="{{ url('add-remove-multiple-input-fields') }}" method="POST">
@csrf
@if ($errors->any())
<div class="alert alert-danger">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
@if (Session::has('success'))
<div class="alert alert-success text-center">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<p>{{ Session::get('success') }}</p>
</div>
@endif
<table class="table table-bordered" id="dynamicAddRemove">  
<tr>
<th>Title</th>
<th>Action</th>
</tr>
<tr>  
<td><input type="text" name="moreFields[0][title]" placeholder="Enter title" class="form-control" /></td>  
<td><button type="button" name="add" id="add-btn" class="btn btn-success">Add More</button></td>  
</tr>  
</table> 
<button type="submit" class="btn btn-success">Save</button>
</form>
</div>
</div>
</div>
<script type="text/javascript">
var i = 0;
$("#add-btn").click(function(){
++i;
$("#dynamicAddRemove").append('<tr><td><input type="text" name="moreFields['+i+'][title]" placeholder="Enter title" class="form-control" /></td><td><button type="button" class="btn btn-danger remove-tr">Remove</button></td></tr>');
});
$(document).on('click', '.remove-tr', function(){  
$(this).parents('tr').remove();
});  
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Laravel 8 - Add/remove multiple input fields dynamically using Jquery</title>

</head>

<body>

<div class="card-header"><h2>Add/remove Multiple Input Todo Fields Dynamically using Jquery In Laravel 8</h2></div>

@csrf

@if ($errors->any())

<ul>

@foreach ($errors->all() as $error)

<li>{{ $error }}</li>

@endforeach

</ul>

</div>

@endif

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

<p>{{ Session::get('success') }}</p>

</div>

@endif

<tr>

<th>Title</th>

<th>Action</th>

</tr>

<tr>

</tr>

</table>

</form>

</div>

var i = 0;

$("#add-btn").click(function(){

++i;

$("#dynamicAddRemove").append('<tr><td><input type="text" name="moreFields['+i+'][title]" placeholder="Enter title" class="form-control" /></td><td><button type="button" class="btn btn-danger remove-tr">Remove</button></td></tr>');

});

$(document).on('click', '.remove-tr', function(){

$(this).parents('tr').remove();

});

</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/add-remove-multiple-input-fields

1	http://localhost:8000/add-remove-multiple-input-fields

Laravel 8 Integrate Summernote Tutorial Example

In this Laravel 8 Integrate Summernote Tutorial Example Tutorial I’ll show you how to install and use Summernote editor in laravel 8. In this tutorial you will learn to install and use Summernote editor in laravel 8.

While creating forms we come to situation where we may text editor field so that we can insert and save html and other text into database. The summernote editor is feature rich wysiwyg html editor allows us to integrate text editor fields in html form. In this laravel 8 summernote editor integration example I will guide you through step by step to install and use summernote wysiwyg editor in laravel 8 application.

Laravel 8 Integrate Summernote Tutorial Example

In this step by step tutorial I will demonstrate you how to install and use summernote wysiwyg editor in laravel 8 application. Please follow the instruction given below:

Step 1: Install Laravel 8 App
Step 2: Connecting App to Database
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 8: Test App

Step 1: Install Laravel 8 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: Connecting App to Database

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:

cd blog

php artisan make:model Post -m

cd blog

php artisan make:model Post -m

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

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

public function up()

{

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

$table->id();

$table->string('title');

$table->longText('description');

$table->timestamps();

});

}

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

php artisan migrate

1	php artisan migrate

The above command will create tables in your database. Then open Post.php model file and put the following code into Post.php model file, which is placed on App/Models directory:

<?php
 
namespace App\Models;
 
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
 
class Post extends Model
{
    use HasFactory;
 
    protected $fillable = ['title','description'];
 
}

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Post extends Model

{

use HasFactory;

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

use App\Http\Controllers\PayController;

Route::get('posts', [PostController::class, 'index']);
Route::post('posts', [PostController::class, 'store']);
Route::get('posts/{id}', [PostController::class, 'show']);

use App\Http\Controllers\PayController;

Route::get('posts', [PostController::class, 'index']);

Route::post('posts', [PostController::class, 'store']);

Route::get('posts/{id}', [PostController::class, 'show']);

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

Now, go to app/http/controllers and open PostController.php file. And put the following code into your PostController.php file, as follow:

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
use App\Models\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\Models\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 we will create blade file. Now, go 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 8</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="{{ url('posts') }}" 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 8</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>
<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>

<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 8 Ajax CRUD with Image Upload Tutorial

In this Laravel 8 Ajax Crud with Image Upload Example tutorial, I’ll show you how to create basic CRUD application with Image upload using DataTables in laravel 8. In this tutorial you learn to create simple CRUD application with image upload using DataTables. In this step by step tutorial we will be creating simple crud application with image upload using DataTables in laravel.

Laravel 8 Ajax CRUD with Image Upload Tutorial

In this step by step guide, we will be creating a simple laravel 8 application to demonstrate you how to install yajra datatable package and implement ajax based CRUD operations with datatable js.

Step 1 – Install laravel 8 App
Step 2 – Connecting App to Database
Step 3 – Create Migration And Model
Step 4 – Install Yajra DataTables In App
Step 5 – Add Routes
Step 6 – Create Controller
Step 7 – Create Blade View
Step 8 – Run Development Server

Step 1 – Install Fresh Laravel Setup

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 – Connecting App to Database

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 And Model

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

php artisan nake:modal Product -m

1	php artisan nake:modal Product -m

Now, go to database/migrations/ and open create_products_table.php file. Then put the following code into this file:

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

<?php

use Illuminate\Database\Migrations\Migration;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;

class CreateProductsTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

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

$table->id();

$table->string('title');

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

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

$table->text('description');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('products');

}

Now, run following command to migrate database schema.

php artisan migrate

1	php artisan migrate

Now, go to App directory and open Product.php file and then put the following code to into Product.php file as follow:

<?php


namespace App\Models;


use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;


class Product extends Model
{
    use HasFactory;


    protected $fillable = [
                           'title',
                           'product_code',
                           'description',
                           'image'
                       ];
                        
}

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Product extends Model

{

use HasFactory;

protected $fillable = [

'title',

'product_code',

'description',

'image'

];

}

Step 4 – Install Yajra Datatables Package in Laravel

In this step, we will install Yajra Datatables Package via the composer dependency manager. Use the following command to install Yajra Datatables.

composer require yajra/laravel-datatables-oracle

1	composer require yajra/laravel-datatables-oracle

After installing Yajra Datatables Packages in your laravel application. Open config/app.php file and add service provider and alias

 config/app.php
 
 
 'providers' =&gt; [
 
 
 Yajra\Datatables\DatatablesServiceProvider::class,
 ],
 
 
 'aliases' =&gt; [
 
 
 'Datatables' =&gt; Yajra\Datatables\Facades\Datatables::class,
 ]

config/app.php

'providers' => [

Yajra\Datatables\DatatablesServiceProvider::class,

'aliases' => [

'Datatables' => Yajra\Datatables\Facades\Datatables::class,

]

After set providers and aliases then publish vendor run by following command.

php artisan vendor:publish

1	php artisan vendor:publish

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

use App\Http\Controllers\ProductController;

Route::get('product-list', [ProductController::class, 'index']);
Route::get('product-list/{id}/edit', [ProductController::class, 'edit']);
Route::post('product-list/store', [ProductController::class, 'store']);
Route::get('product-list/delete/{id}', [ProductController::class, 'destroy']);

use App\Http\Controllers\ProductController;

Route::get('product-list', [ProductController::class, 'index']);

Route::get('product-list/{id}/edit', [ProductController::class, 'edit']);

Route::post('product-list/store', [ProductController::class, 'store']);

Route::get('product-list/delete/{id}', [ProductController::class, 'destroy']);

Step 6 – Create Controller

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

php artisan make:controller ProductController

1	php artisan make:controller ProductController

Next navigate to app/Http/Controllers and open ProductController.php file. Then update the following methods for add products, edit product and delete the product into this controller file:

The Product Controller, will include following methods:
Index() :- The index method will be used to display list of all products.
Store() :- The store method will be used to save and update the product into a database.
Edit() :- The edit method will be used to edit product detail.
Destroy() :- The delete method will be used to delete product from list and database as well.

Now, update all methods into your ProductController.php file as follow:

<?php
   
namespace App\Http\Controllers;
   
use App\Product;
use Illuminate\Http\Request;
use Redirect,Response,DB;
use File;
use PDF;
   
class ProductController extends Controller
{
    public function index()
    {
        if(request()->ajax()) {
            return datatables()->of(Product::select('*'))
            ->addColumn('action', 'product-button')
            ->addColumn('image', 'image')
            ->rawColumns(['action','image'])
            ->addIndexColumn()
            ->make(true);
        }
        return view('list');
    } 
 
    public function store(Request $request)
    {  
        request()->validate([
            'image' => 'image|mimes:jpeg,png,jpg,gif,svg|max:2048',
       ]);
 
        $productId = $request->product_id;
 
        $details = ['title' => $request->title, 'product_code' => $request->product_code, 'description' => $request->description];
 
        if ($files = $request->file('image')) {
            
           //delete old file
           \File::delete('public/product/'.$request->hidden_image);
         
           //insert new file
           $destinationPath = 'public/product/'; // upload path
           $profileImage = date('YmdHis') . "." . $files->getClientOriginalExtension();
           $files->move($destinationPath, $profileImage);
           $details['image'] = "$profileImage";
        }
         
        $product   =   Product::updateOrCreate(['id' => $productId], $details);  
               
        return Response::json($product);
    } 
 
    public function edit($id)
    {   
        $where = array('id' => $id);
        $product  = Product::where($where)->first();
      
        return Response::json($product);
    }
    public function destroy($id) 
    {
        $data = Product::where('id',$id)->first(['image']);
        \File::delete('public/product/'.$data->image);
        $product = Product::where('id',$id)->delete();
      
        return Response::json($product);
    }
}

<?php

namespace App\Http\Controllers;

use App\Product;

use Illuminate\Http\Request;

use Redirect,Response,DB;

use File;

use PDF;

class ProductController extends Controller

{

public function index()

{

if(request()->ajax()) {

return datatables()->of(Product::select('*'))

->addColumn('action', 'product-button')

->addColumn('image', 'image')

->rawColumns(['action','image'])

->addIndexColumn()

->make(true);

}

return view('list');

}

public function store(Request $request)

{

request()->validate([

'image' => 'image|mimes:jpeg,png,jpg,gif,svg|max:2048',

]);

$productId = $request->product_id;

$details = ['title' => $request->title, 'product_code' => $request->product_code, 'description' => $request->description];

if ($files = $request->file('image')) {

//delete old file

\File::delete('public/product/'.$request->hidden_image);

//insert new file

$destinationPath = 'public/product/'; // upload path

$profileImage = date('YmdHis') . "." . $files->getClientOriginalExtension();

$files->move($destinationPath, $profileImage);

$details['image'] = "$profileImage";

}

$product = Product::updateOrCreate(['id' => $productId], $details);

return Response::json($product);

}

public function edit($id)

{

$where = array('id' => $id);

$product = Product::where($where)->first();

return Response::json($product);

}

public function destroy($id)

{

$data = Product::where('id',$id)->first(['image']);

\File::delete('public/product/'.$data->image);

$product = Product::where('id',$id)->delete();

return Response::json($product);

}

Step 7 – Create Blade View

Create the directory and create blade view file for CRUD operations as following: Now, Navigate to resources/views directory and create action.blade.php file.

<a href="javascript:void(0)" data-toggle="tooltip"  data-id="{{ $id }}" data-original-title="Edit" class="edit btn btn-success edit-product">
    Edit
</a>
<a href="javascript:void(0);" id="delete-product" data-toggle="tooltip" data-original-title="Delete" data-id="{{ $id }}" class="delete btn btn-danger">
    Delete
</a>

Edit

</a>

Delete

</a>

Next, create a list.blade.php file inside resources/views/ folder and update the below code in your product list file.

<!DOCTYPE html>
<html lang="en">
<head>
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Laravel Ajax Crud Example with Image Upload Tutorial</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<link  href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<a href="javascript:void(0)" class="btn btn-info ml-3" id="create-new-product">Add New</a>
<br><br></br><br>
<table class="table table-bordered table-striped" id="laravel_datatable">
<thead>
<tr>
<th>ID</th>
<th>S. No</th>
<th>Image</th>
<th>Title</th>
<th>Product Code</th>
<th>Description</th>
<th>Created at</th>
<th>Action</th>
</tr>
</thead>
</table>
</div>
<div class="modal fade" id="ajax-product-modal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="productCrudModal"></h4>
</div>
<div class="modal-body">
<form id="productForm" name="productForm" class="form-horizontal" enctype="multipart/form-data">
<input type="hidden" name="product_id" id="product_id">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Title</label>
<div class="col-sm-12">
<input type="text" class="form-control" id="title" name="title" placeholder="Enter Tilte" value="" maxlength="50" required="">
</div>
</div>
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Product Code</label>
<div class="col-sm-12">
<input type="text" class="form-control" id="product_code" name="product_code" placeholder="Enter Tilte" value="" maxlength="50" required="">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Description</label>
<div class="col-sm-12">
<input type="text" class="form-control" id="description" name="description" placeholder="Enter Description" value="" required="">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Image</label>
<div class="col-sm-12">
<input id="image" type="file" name="image" accept="image/*" onchange="readURL(this);">
<input type="hidden" name="hidden_image" id="hidden_image">
</div>
</div>
<img id="modal-preview" src="https://via.placeholder.com/150" alt="Preview" class="form-group hidden" width="100" height="100">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" id="btn-save" value="create">Save changes
</button>
</div>
</form>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div> 
</body>
</html>

<!DOCTYPE html>

<head>

<title>Laravel Ajax Crud Example with Image Upload Tutorial</title>

</head>

<body>

<thead>

<tr>

<th>Image</th>

<th>Title</th>

<th>Product Code</th>

<th>Description</th>

<th>Created at</th>

<th>Action</th>

</tr>

</thead>

</table>

</div>

</div>

<label for="name" class="col-sm-2 control-label">Title</label>

</div>

<label for="name" class="col-sm-2 control-label">Product Code</label>

</div>

<label class="col-sm-2 control-label">Description</label>

</div>

<label class="col-sm-2 control-label">Image</label>

</div>

<button type="submit" class="btn btn-primary" id="btn-save" value="create">Save changes

</button>

</div>

</form>

</div>

</div>

</body>

</html>

Next, you will create a script code for performing create, store, update and delete products from the database table products using jQuery ajax request in laravel. So update this code in your list.blade.php file:

<script>
var SITEURL = '{{URL::to('')}}';
$(document).ready( function () {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$('#laravel_datatable').DataTable({
processing: true,
serverSide: true,
ajax: {
url: SITEURL + "product-list",
type: 'GET',
},
columns: [
{data: 'id', name: 'id', 'visible': false},
{data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false,searchable: false},
{data: 'image', name: 'image', orderable: false},
{ data: 'title', name: 'title' },
{ data: 'product_code', name: 'product_code' },
{ data: 'description', name: 'description' },
{ data: 'created_at', name: 'created_at' },
{data: 'action', name: 'action', orderable: false},
],
order: [[0, 'desc']]
});
/*  When user click add user button */
$('#create-new-product').click(function () {
$('#btn-save').val("create-product");
$('#product_id').val('');
$('#productForm').trigger("reset");
$('#productCrudModal').html("Add New Product");
$('#ajax-product-modal').modal('show');
$('#modal-preview').attr('src', 'https://via.placeholder.com/150');
});
/* When click edit user */
$('body').on('click', '.edit-product', function () {
var product_id = $(this).data('id');
$.get('product-list/' + product_id +'/edit', function (data) {
$('#title-error').hide();
$('#product_code-error').hide();
$('#description-error').hide();
$('#productCrudModal').html("Edit Product");
$('#btn-save').val("edit-product");
$('#ajax-product-modal').modal('show');
$('#product_id').val(data.id);
$('#title').val(data.title);
$('#product_code').val(data.product_code);
$('#description').val(data.description);
$('#modal-preview').attr('alt', 'No image available');
if(data.image){
$('#modal-preview').attr('src', SITEURL +'public/product/'+data.image);
$('#hidden_image').attr('src', SITEURL +'public/product/'+data.image);
}
})
});
$('body').on('click', '#delete-product', function () {
var product_id = $(this).data("id");
if(confirm("Are You sure want to delete !")){
$.ajax({
type: "get",
url: SITEURL + "product-list/delete/"+product_id,
success: function (data) {
var oTable = $('#laravel_datatable').dataTable(); 
oTable.fnDraw(false);
},
error: function (data) {
console.log('Error:', data);
}
});
}
});  
});
$('body').on('submit', '#productForm', function (e) {
e.preventDefault();
var actionType = $('#btn-save').val();
$('#btn-save').html('Sending..');
var formData = new FormData(this);
$.ajax({
type:'POST',
url: SITEURL + "product-list/store",
data: formData,
cache:false,
contentType: false,
processData: false,
success: (data) => {
$('#productForm').trigger("reset");
$('#ajax-product-modal').modal('hide');
$('#btn-save').html('Save Changes');
var oTable = $('#laravel_datatable').dataTable();
oTable.fnDraw(false);
},
error: function(data){
console.log('Error:', data);
$('#btn-save').html('Save Changes');
}
});
});
function readURL(input, id) {
id = id || '#modal-preview';
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$(id).attr('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
$('#modal-preview').removeClass('hidden');
$('#start').hide();
}
}
</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

var SITEURL = '{{URL::to('')}}';

$(document).ready( function () {

$.ajaxSetup({

headers: {

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

}

});

$('#laravel_datatable').DataTable({

processing: true,

serverSide: true,

ajax: {

url: SITEURL + "product-list",

type: 'GET',

columns: [

{data: 'id', name: 'id', 'visible': false},

{data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false,searchable: false},

{data: 'image', name: 'image', orderable: false},

{ data: 'title', name: 'title' },

{ data: 'product_code', name: 'product_code' },

{ data: 'description', name: 'description' },

{ data: 'created_at', name: 'created_at' },

{data: 'action', name: 'action', orderable: false},

order: [[0, 'desc']]

});

/* When user click add user button */

$('#create-new-product').click(function () {

$('#btn-save').val("create-product");

$('#product_id').val('');

$('#productForm').trigger("reset");

$('#productCrudModal').html("Add New Product");

$('#ajax-product-modal').modal('show');

$('#modal-preview').attr('src', 'https://via.placeholder.com/150');

});

/* When click edit user */

$('body').on('click', '.edit-product', function () {

var product_id = $(this).data('id');

$.get('product-list/' + product_id +'/edit', function (data) {

$('#title-error').hide();

$('#product_code-error').hide();

$('#description-error').hide();

$('#productCrudModal').html("Edit Product");

$('#btn-save').val("edit-product");

$('#ajax-product-modal').modal('show');

$('#product_id').val(data.id);

$('#title').val(data.title);

$('#product_code').val(data.product_code);

$('#description').val(data.description);

$('#modal-preview').attr('alt', 'No image available');

if(data.image){

$('#modal-preview').attr('src', SITEURL +'public/product/'+data.image);

$('#hidden_image').attr('src', SITEURL +'public/product/'+data.image);

}

})

});

$('body').on('click', '#delete-product', function () {

var product_id = $(this).data("id");

if(confirm("Are You sure want to delete !")){

$.ajax({

type: "get",

url: SITEURL + "product-list/delete/"+product_id,

success: function (data) {

var oTable = $('#laravel_datatable').dataTable();

oTable.fnDraw(false);

error: function (data) {

console.log('Error:', data);

}

});

}

});

$('body').on('submit', '#productForm', function (e) {

e.preventDefault();

var actionType = $('#btn-save').val();

$('#btn-save').html('Sending..');

var formData = new FormData(this);

$.ajax({

type:'POST',

url: SITEURL + "product-list/store",

data: formData,

cache:false,

contentType: false,

processData: false,

success: (data) => {

$('#productForm').trigger("reset");

$('#ajax-product-modal').modal('hide');

$('#btn-save').html('Save Changes');

var oTable = $('#laravel_datatable').dataTable();

oTable.fnDraw(false);

error: function(data){

console.log('Error:', data);

$('#btn-save').html('Save Changes');

}

});

function readURL(input, id) {

id = id || '#modal-preview';

if (input.files && input.files[0]) {

var reader = new FileReader();

reader.onload = function (e) {

$(id).attr('src', e.target.result);

};

reader.readAsDataURL(input.files[0]);

$('#modal-preview').removeClass('hidden');

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

}

</script>

Next, navigate to resources/views and create image.blade.php file. Then update the following code into your image.blade.php file:

@if($image)
<img id="preview" src="{{ ('public/product/'.$image) }}" alt="Preview" class="form-group hidden" width="100" height="100">
@else
<img id="preview" src="https://via.placeholder.com/150" alt="Preview" class="form-group hidden" width="100" height="100">
@endif

@if($image)

@else

@endif

Step 8 – 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/product-list

1	http://localhost:8000/product-list