How to Create Roles and Permissions in Laravel 11
Hello, laravel web developers! In this article, we'll create roles and permissions in laravel 11. Here, we'll use spatie/laravel-permission package in laravel 11 to perform user roles and permissions. This package allows you to manage user permissions and roles in a database.
Here, we'll create a product table and give the user permission to create and edit. Also, you can give different kinds of roles and permission as per the requirements.
Laravel 11 Roles and Permissions using spatie/laravel-permission
Step 1: Install Laravel 11
In this step, we'll install the laravel 11 using the following command.
composer create-project --prefer-dist laravel/laravel laravel_11_roles_permissions
configure .env file
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_11
DB_USERNAME=root
DB_PASSWORD=
Next, we'll change the database to MySQL in the config/database.php file.
<?php
use Illuminate\Support\Str;
return [
'default' => env('DB_CONNECTION', 'mysql'),
'connections' => [
...
'mysql' => [
'driver' => 'mysql',
'url' => env('DB_URL'),
'host' => env('DB_HOST', '127.0.0.1'),
'port' => env('DB_PORT', '3306'),
'database' => env('DB_DATABASE', 'laravel'),
'username' => env('DB_USERNAME', 'root'),
'password' => env('DB_PASSWORD', ''),
'unix_socket' => env('DB_SOCKET', ''),
'charset' => env('DB_CHARSET', 'utf8mb4'),
'collation' => env('DB_COLLATION', 'utf8mb4_unicode_ci'),
'prefix' => '',
'prefix_indexes' => true,
'strict' => true,
'engine' => null,
'options' => extension_loaded('pdo_mysql') ? array_filter([
PDO::MYSQL_ATTR_SSL_CA => env('MYSQL_ATTR_SSL_CA'),
]) : [],
],
...
],
];
Note: if you get a collation error then change it to 'collation' => env('DB_COLLATION', 'utf8mb4_unicode_ci')
Step 2: Create Auth in Laravel 11
then, we'll create a laravel basic auth scaffolding using the laravel UI command.
composer require laravel/ui
Install bootstrap auth using the below command.
php artisan ui bootstrap --auth
Now, install npm and run dev for better UI results.
npm install
npm run dev
Step 3: Install spatie/laravel-permission Packages
Next, we'll install the spatie/laravel-permission package using the following command.
composer require spatie/laravel-permission
Optional: The service provider will automatically get registered. Or you may manually add the service provider in your config/app.php file:
'providers' => [
// ...
Spatie\Permission\PermissionServiceProvider::class,
];
Optional: The service provider will automatically get registered. Or you may manually add the service provider in your config/app.php file.
'providers' => [
....
Spatie\Permission\PermissionServiceProvider::class,
],
You should publish the migration and the config/permission.php config file.
php artisan vendor:publish --provider="Spatie\Permission\PermissionServiceProvider"
Step 4: Create Migration for Product table
Then, we'll create a migration for the products table using the following command.
php artisan make:migration create_products_table
Migration:
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::create('products', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->text('detail');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('products');
}
};
Next, migrate the table into the database using the following command.
php artisan migrate
Step 5: Create Model
Now, we'll change the User.php model.
app/Models/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<int, string>
*/
protected $fillable = [
'name',
'email',
'password',
];
/**
* The attributes that should be hidden for serialization.
*
* @var array<int, string>
*/
protected $hidden = [
'password',
'remember_token',
];
/**
* Get the attributes that should be cast.
*
* @return array<string, string>
*/
protected function casts(): array
{
return [
'email_verified_at' => 'datetime',
'password' => 'hashed',
];
}
}
Then, we will create a Product.php model and add the following code to that file.
app/Models/Product.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Product extends Model
{
use HasFactory;
protected $fillable = [
'name', 'detail'
];
}
Step 6: Add Middleware
After that, we'll add middleware in the app.php file. Spatie package provides its in-built middleware.
bootstrap/app.php
<?php
use Illuminate\Foundation\Application;
use Illuminate\Foundation\Configuration\Exceptions;
use Illuminate\Foundation\Configuration\Middleware;
return Application::configure(basePath: dirname(__DIR__))
->withRouting(
web: __DIR__.'/../routes/web.php',
commands: __DIR__.'/../routes/console.php',
health: '/up',
)
->withMiddleware(function (Middleware $middleware) {
$middleware->alias([
'role' => \Spatie\Permission\Middleware\RoleMiddleware::class,
'permission' => \Spatie\Permission\Middleware\PermissionMiddleware::class,
'role_or_permission' => \Spatie\Permission\Middleware\RoleOrPermissionMiddleware::class,
]);
})
->withExceptions(function (Exceptions $exceptions) {
//
})->create();
Step 7: Define Routes
Now, we'll define routes in the web.php file. we are creating three different resource routes and also adding auth middleware in those routes.
routes/web.php
<?php
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\RoleController;
use App\Http\Controllers\UserController;
use App\Http\Controllers\ProductController;
Route::get('/', function () {
return view('welcome');
});
Auth::routes();
Route::get('/home', [App\Http\Controllers\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 8: Create Controller
Now, we'll create a controller and perform the CRUD operation for users and also define the permission for this.
app/Http/Controllers/UserController.php
<?php
namespace App\Http\Controllers;
use App\Models\User;
use Illuminate\Support\Arr;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use Spatie\Permission\Models\Role;
use Illuminate\Support\Facades\Hash;
class UserController extends Controller
{
function __construct()
{
$this->middleware('permission:user-list|user-create|user-edit|user-delete', ['only' => ['index','store']]);
$this->middleware('permission:user-create', ['only' => ['create','store']]);
$this->middleware('permission:user-edit', ['only' => ['edit','update']]);
$this->middleware('permission:user-delete', ['only' => ['destroy']]);
}
/**
* Display a listing of the resource.
*/
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.
*/
public function create()
{
$roles = Role::pluck('name','name')->all();
return view('users.create',compact('roles'));
}
/**
* Store a newly created resource in storage.
*/
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.
*/
public function show(string $id)
{
$user = User::find($id);
return view('users.show',compact('user'));
}
/**
* Show the form for editing the specified resource.
*/
public function edit(string $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.
*/
public function update(Request $request, string $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.
*/
public function destroy(string $id)
{
User::find($id)->delete();
return redirect()->route('users.index')->with('success','User deleted successfully');
}
}
Then, we'll create a ProductController.php file.
app/Http/Controllers/ProductController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Product;
class ProductController extends Controller
{
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.
*/
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.
*/
public function create()
{
return view('products.create');
}
/**
* Store a newly created resource in storage.
*/
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.
*/
public function show(Product $product)
{
return view('products.show',compact('product'));
}
/**
* Show the form for editing the specified resource.
*/
public function edit(Product $product)
{
return view('products.edit',compact('product'));
}
/**
* Update the specified resource in storage.
*/
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.
*/
public function destroy(Product $product)
{
$product->delete();
return redirect()->route('products.index')->with('success','Product deleted successfully');
}
}
After that, we'll create a controller for the roles.
app/Http/Controllers/RoleController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use Spatie\Permission\Models\Role;
use Spatie\Permission\Models\Permission;
class RoleController extends Controller
{
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.
*/
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.
*/
public function create()
{
$permission = Permission::get();
return view('roles.create',compact('permission'));
}
/**
* Store a newly created resource in storage.
*/
public function store(Request $request)
{
request()->validate([
'name' => 'required|unique:roles,name',
'permission' => 'required',
]);
$role = Role::create(['name' => $request->input('name')]);
$permissions = [];
$post_permissions = $request->input('permission');
foreach ($post_permissions as $key => $val) {
$permissions[intval($val)] = intval($val);
}
$role->syncPermissions($permissions);
return redirect()->route('roles.index')->with('success','Role created successfully');
}
/**
* Display the specified resource.
*/
public function show(string $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.
*/
public function edit(string $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.
*/
public function update(Request $request, string $id)
{
$this->validate($request, [
'name' => 'required',
'permission' => 'required',
]);
$role = Role::find($id);
$role->name = $request->input('name');
$role->save();
$permissions = [];
$post_permissions = $request->input('permission');
foreach ($post_permissions as $key => $val) {
$permissions[intval($val)] = intval($val);
}
$role->syncPermissions($permissions);
return redirect()->route('roles.index')->with('success','Role updated successfully');
}
/**
* Remove the specified resource from storage.
*/
public function destroy(string $id)
{
DB::table("roles")->where('id',$id)->delete();
return redirect()->route('roles.index')->with('success','Role deleted successfully');
}
}
Step 9: Create Blade File
Now, we need to create blade files for different modules like User, Roles, and Product.
resources/views/layouts/app.blade.php
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>How to Create Roles and Permissions in Laravel 11 - Techsolutionstuff</title>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet">
<!-- Scripts -->
@vite(['resources/sass/app.scss', 'resources/js/app.js'])
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto">
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ms-auto">
<!-- Authentication Links -->
@guest
@if (Route::has('login'))
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
@endif
@if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
@endif
@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-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }}
</a>
<div class="dropdown-menu dropdown-menu-end" 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" class="d-none">
@csrf
</form>
</div>
</li>
@endguest
</ul>
</div>
</div>
</nav>
<main class="py-4 container">
@yield('content')
</main>
</div>
</body>
</html>
resources/views/users/index.blade.php
@extends('layouts.app')
@section('content')
<div class="row">
<div class="col-lg-12 mb-3">
<div class="d-flex justify-content-between align-items-center">
<h2>Users Management</h2>
<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">
<label>{{ $message }}</label>
</div>
@endif
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">No</th>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Roles</th>
<th scope="col" width="280px">Action</th>
</tr>
</thead>
<tbody>
@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)
<span class="badge bg-success">{{ $v }}</span>
@endforeach
@endif
</td>
<td>
<div class="d-flex gap-2" role="group" aria-label="User Actions">
<a class="btn btn-primary flex-fill" href="{{ route('users.show', $user->id) }}">Show</a>
<a class="btn btn-success flex-fill" href="{{ route('users.edit', $user->id) }}">Edit</a>
<form method="POST" action="{{ route('users.destroy', $user->id) }}"
style="display:inline">
@csrf
@method('DELETE')
<button type="submit" class="btn btn-danger flex-fill">Delete</button>
</form>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
{!! $data->render() !!}
@endsection
resources/views/users/create.blade.php
@extends('layouts.app')
@section('content')
<div class="row">
<div class="col-lg-12">
<div class="d-flex justify-content-between align-items-center">
<h2>Create New User</h2>
<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>Something went wrong.<br><br>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form method="POST" action="{{ route('users.store') }}">
@csrf
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="name" class="form-label">Name:</label>
<input type="text" name="name" id="name" placeholder="Name" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="email" class="form-label">Email:</label>
<input type="email" name="email" id="email" placeholder="Email" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="password" class="form-label">Password:</label>
<input type="password" name="password" id="password" placeholder="Password" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="confirm-password" class="form-label">Confirm Password:</label>
<input type="password" name="confirm-password" id="confirm-password" placeholder="Confirm Password"
class="form-control">
</div>
</div>
<div class="col-md-12">
<div class="mb-3">
<label for="roles" class="form-label">Role:</label>
<select name="roles[]" class="form-select" multiple>
@foreach($roles as $key => $value)
<option value="{{ $key }}">{{ $value }}</option>
@endforeach
</select>
</div>
</div>
<div class="col-md-12 text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
@endsection
resources/views/users/edit.blade.php
@extends('layouts.app')
@section('content')
<div class="row">
<div class="col-lg-12">
<div class="d-flex justify-content-between align-items-center mb-4">
<h2>Edit User</h2>
<a class="btn btn-primary" href="{{ route('users.index') }}">Back</a>
</div>
</div>
</div>
@if ($errors->any())
<div class="alert alert-danger">
<strong>Whoops!</strong> Something went wrong.<br><br>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form method="POST" action="{{ route('users.update', $user->id) }}">
@csrf
@method('PATCH')
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="name" class="form-label"><strong>Name:</strong></label>
<input type="text" name="name" value="{{ $user->name }}" id="name" placeholder="Name"
class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="email" class="form-label"><strong>Email:</strong></label>
<input type="text" name="email" value="{{ $user->email }}" id="email" placeholder="Email"
class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="password" class="form-label"><strong>Password:</strong></label>
<input type="password" name="password" id="password" placeholder="Password" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="confirm-password" class="form-label"><strong>Confirm Password:</strong></label>
<input type="password" name="confirm-password" id="confirm-password" placeholder="Confirm Password"
class="form-control">
</div>
</div>
<div class="col-md-12">
<div class="mb-3">
<label for="roles" class="form-label"><strong>Role:</strong></label>
<select name="roles[]" class="form-select" multiple>
@foreach($roles as $key => $value)
<option value="{{ $key }}" @if(in_array($key, $userRole)) selected @endif>{{ $value }}</option>
@endforeach
</select>
</div>
</div>
<div class="col-md-12 text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
@endsection
resources/views/users/show.blade.php
@extends('layouts.app')
@section('content')
<div class="row">
<div class="col-lg-12">
<div class="d-flex justify-content-between align-items-center mb-4">
<h2>Show User</h2>
<a class="btn btn-primary" href="{{ route('users.index') }}">Back</a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="name" class="form-label"><strong>Name:</strong></label>
<p>{{ $user->name }}</p>
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="email" class="form-label"><strong>Email:</strong></label>
<p>{{ $user->email }}</p>
</div>
</div>
<div class="col-md-12">
<div class="mb-3">
<label for="roles" class="form-label"><strong>Roles:</strong></label>
<div>
@if (!empty($user->getRoleNames()))
@foreach ($user->getRoleNames() as $v)
<span class="badge bg-success">{{ $v }}</span>
@endforeach
@endif
</div>
</div>
</div>
</div>
@endsection
resources/views/roles/index.blade.php
@extends('layouts.app')
@section('content')
<div class="row">
<div class="col-lg-12">
<div class="d-flex justify-content-between align-items-center mb-4">
<h2>Role Management</h2>
@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">
<label>{{ $message }}</label>
</div>
@endif
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th width="280px">Action</th>
</tr>
</thead>
<tbody>
@foreach ($roles as $key => $role)
<tr>
<td>{{ ++$i }}</td>
<td>{{ $role->name }}</td>
<td>
<div class="d-flex gap-2" role="group" aria-label="User Actions">
<a class="btn btn-primary flex-fill" href="{{ route('roles.show', $role->id) }}">Show</a>
@can('role-edit')
<a class="btn btn-success flex-fill" href="{{ route('roles.edit', $role->id) }}">Edit</a>
@endcan
@can('role-delete')
<form method="POST" action="{{ route('roles.destroy', $role->id) }}"
style="display:inline">
@csrf
@method('DELETE')
<button type="submit" class="btn btn-danger flex-fill">Delete</button>
</form>
@endcan
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
{!! $roles->render() !!}
@endsection
resources/views/roles/create.blade.php
@extends('layouts.app')
@section('content')
<div class="row">
<div class="col-lg-12">
<div class="d-flex justify-content-between align-items-center mb-4">
<h2>Create New Role</h2>
<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> Something went wrong.<br><br>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form method="POST" action="{{ route('roles.store') }}">
@csrf
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="name" class="form-label"><strong>Name:</strong></label>
<input type="text" name="name" placeholder="Name" class="form-control">
</div>
<div class="mb-3">
<label for="permission" class="form-label"><strong>Permissions:</strong></label>
<div class="list-group">
@foreach ($permission as $value)
<label class="list-group-item d-flex align-items-center">
<input type="checkbox" name="permission[]" value="{{ $value->id }}"
class="form-check-input me-3" id="permission{{ $value->id }}">
{{ $value->name }}
</label>
@endforeach
</div>
</div>
</div>
<div class="col-md-12 text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
@endsection
resources/views/roles/edit.blade.php
@extends('layouts.app')
@section('content')
<div class="row">
<div class="col-lg-12">
<div class="d-flex justify-content-between align-items-center mb-4">
<h2>Edit Role</h2>
<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> Something went wrong.<br><br>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form method="POST" action="{{ route('roles.update', $role->id) }}">
@csrf
@method('PATCH')
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="name" class="form-label"><strong>Name:</strong></label>
<input type="text" name="name" value="{{ $role->name }}" id="name" placeholder="Name"
class="form-control">
</div>
<div class="mb-3">
<label for="permission" class="form-label"><strong>Permissions:</strong></label>
<div class="list-group">
@foreach ($permission as $value)
<label class="list-group-item d-flex align-items-center">
<input type="checkbox" name="permission[]" value="{{ $value->id }}"
class="form-check-input me-3" id="permission{{ $value->id }}"
{{ in_array($value->id, $rolePermissions) ? 'checked' : '' }}>
{{ $value->name }}
</label>
@endforeach
</div>
</div>
</div>
<div class="col-md-12 text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
@endsection
resources/views/roles/show.blade.php
@extends('layouts.app')
@section('content')
<div class="row">
<div class="col-lg-12">
<div class="d-flex justify-content-between align-items-center mb-4">
<h2>Show Role</h2>
<a class="btn btn-primary" href="{{ route('roles.index') }}">Back</a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="name" class="form-label"><strong>Name:</strong></label>
<p>{{ $role->name }}</p>
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="permissions" class="form-label"><strong>Permissions:</strong></label>
<div>
@if (!empty($rolePermissions))
@foreach ($rolePermissions as $v)
<span class="badge bg-success">{{ $v->name }}</span>
@endforeach
@endif
</div>
</div>
</div>
</div>
@endsection
resources/views/products/index.blade.php
@extends('layouts.app')
@section('content')
<div class="row">
<div class="col-lg-12">
<div class="d-flex justify-content-between align-items-center mb-3">
<h2>Products</h2>
@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">
<label>{{ $message }}</label>
</div>
@endif
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">No</th>
<th scope="col">Name</th>
<th scope="col">Details</th>
<th scope="col" width="280px">Action</th>
</tr>
</thead>
<tbody>
@forelse ($products as $product)
<tr>
<td>{{ ++$i }}</td>
<td>{{ $product->name }}</td>
<td>{{ $product->detail }}</td>
<td>
<div class="d-flex gap-2" role="group" aria-label="User Actions">
<a class="btn btn-primary flex-fill" href="{{ route('products.show', $product->id) }}">Show</a>
@can('product-edit')
<a class="btn btn-success flex-fill" href="{{ route('products.edit', $product->id) }}">Edit</a>
@endcan
<form action="{{ route('products.destroy', $product->id) }}" method="POST" class="d-flex flex-fill">
@csrf
@method('DELETE')
@can('product-delete')
<button type="submit" class="btn btn-danger flex-fill">Delete</button>
@endcan
</form>
</div>
</td>
</tr>
@empty
<tr>
<td colspan="4" class="text-center">No records found</td>
</tr>
@endforelse
</tbody>
</table>
{!! $products->links() !!}
@endsection
resources/views/products/create.blade.php
@extends('layouts.app')
@section('content')
<div class="row">
<div class="col-lg-12">
<div class="d-flex justify-content-between align-items-center mb-3">
<h2 class="mb-0">Add New Product</h2>
<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> Something went wrong.<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-md-12">
<div class="mb-3">
<label for="name" class="form-label"><strong>Name:</strong></label>
<input type="text" name="name" class="form-control" id="name" placeholder="Name">
</div>
<div class="mb-3">
<label for="detail" class="form-label"><strong>Detail:</strong></label>
<textarea class="form-control" style="height:150px" name="detail" id="detail" placeholder="Detail"></textarea>
</div>
</div>
<div class="col-12 text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
@endsection
resources/views/products/edit.blade.php
@extends('layouts.app')
@section('content')
<div class="row">
<div class="col-lg-12">
<div class="d-flex justify-content-between align-items-center mb-3">
<h2 class="mb-0">Edit Product</h2>
<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> Something went wrong.<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-md-12">
<div class="mb-3">
<label for="name" class="form-label"><strong>Name:</strong></label>
<input type="text" name="name" value="{{ $product->name }}" class="form-control" id="name" placeholder="Name">
</div>
<div class="mb-3">
<label for="detail" class="form-label"><strong>Detail:</strong></label>
<textarea class="form-control" style="height:150px" name="detail" id="detail" placeholder="Detail">{{ $product->detail }}</textarea>
</div>
</div>
<div class="col-12 text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
@endsection
resources/views/products/show.blade.php
@extends('layouts.app')
@section('content')
<div class="row">
<div class="col-lg-12">
<div class="d-flex justify-content-between align-items-center mb-3">
<h2>Show Product</h2>
<a class="btn btn-primary" href="{{ route('products.index') }}">Back</a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<strong>Name:</strong>
{{ $product->name }}
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<strong>Details:</strong>
{{ $product->detail }}
</div>
</div>
</div>
@endsection
Step 10: Create Seeder
Next, we'll run the below command and create a Permission Seeder.
php artisan make:seeder PermissionTableSeeder
database/seeders/PermissionTableSeeder.php
<?php
namespace Database\Seeders;
use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;
use Spatie\Permission\Models\Permission;
class PermissionTableSeeder extends Seeder
{
/**
* Run the database seeds.
*/
public function run(): void
{
$permissions = [
'user-list',
'user-create',
'user-edit',
'user-delete',
'role-list',
'role-create',
'role-edit',
'role-delete',
'product-list',
'product-create',
'product-edit',
'product-delete'
];
foreach ($permissions as $permission) {
Permission::firstOrCreate(['name' => $permission]);
}
}
}
then, run the following command to run the seeder.
php artisan db:seed --class=PermissionTableSeeder
Next, we'll create a new seeder for admin users.
php artisan make:seeder CreateAdminUserSeeder
database/seeders/CreateAdminUserSeeder.php
<?php
namespace Database\Seeders;
use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;
use App\Models\User;
use Spatie\Permission\Models\Role;
use Spatie\Permission\Models\Permission;
class CreateAdminUserSeeder extends Seeder
{
/**
* Run the database seeds.
*/
public function run(): void
{
$user = User::create([
'name' => 'admin',
'email' => 'admin@gmail.com',
'password' => bcrypt('12345678')
]);
$role = Role::create(['name' => 'Admin']);
$permissions = Permission::pluck('id','id')->all();
$role->syncPermissions($permissions);
$user->assignRole([$role->id]);
}
}
Then we will run the admin user seeder using the below command in the terminal.
php artisan db:seed --class=CreateAdminUserSeeder
You might also like:
- Read Also: How to Create CRUD Operation in Laravel 11
- Read Also: How to Create Multi Step Form in Laravel 11
- Read Also: Integrate Stripe Payment Gateway in Laravel 11
- Read Also: Laravel 11 REST API Authentication using Sanctum
