I know you’re thinking we already have one. Yes, we have one, but it does not support SSR authentication. And the best part? It’s completely stateless!

Link: https://github.com/CODE-AXION/nextjs-ssr-laravel-kit/tree/main

Things we are gonna talk about ?

- Key Features & Security
- Installation
- Behind the Scenes and Flow
- Additional Information

To begin with, let me tell you about the main features of this starter kit .

Stateless Authentication
Fully stateless that means we are communicating with only tokens

SSR Authentication
This gives us several advantages like SSR middlewares and to display the user data quickly

Middleware checks
for protected routes, guest routes, verify email just like laravel.
The middlewares are easily implemented and has all the verification checks which laravel includes

Signed Double Submit CSRF Protection
As we talked earlier this starter kit is fully stateless and you can scale it easily . You might be asking why not use Laravel CSRF protection … ?

Reason: i have not relied on Laravel csrf tokens is because it’s tied to server-side sessions for handling csrf tokens and we wanted this to be completely stateless so we have used signed double submit cookie protection which is stateless and secure and does not require to work with session which gives us benefits to :

— Better Integration with API-First and SPA Architectures

— making it more scalable and easier to manage across different server instances, especially in microservices or stateless architectures

— No Need for Session Storage

— Most recommended option from OWASP itself to protect from csrf attacks (https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html#signed-double-submit-cookie-recommended)

HttpOnly Cookie Secure tokens
— We are using Http Only LAX cookie so that our cookies are not being tampered .

— Security guidelines (COOKIES, CSRF) following OWASP Guidelines

— We have followed the Best practices for the cookies and CSRF from the OWASP Guidelines itself.

Refresh Token for preventing token expiration

— We have implemented Refresh Token Architecture so the user does not have to log in every time .

Reusable authorization helpers

— If you have used Spatie roles and permission package we have provided similar helpers in the starter kit .

Installation

git clone https://github.com/CODE-AXION/nextjs-ssr-laravel-kit?tab=readme-ov-file

then run the following commands

composer install
copy the .env.example to .env
php artisan key:generate
php artisan migrate
php artisan db:seed to ( generate users and roles and permission )

Important Note:

Next, ensure that you have to added the Laravel API_URL and FRONTEND_URL environment variables in the laravel .env file or you might face some issues.

API_URL=http://localhost:8000/api
FRONTEND_URL=http://localhost:3000

After defining the appropriate environment variables, you may serve the Laravel application using the below Artisan command:

php artisan serve --host=localhost --port=8000

Frontend setup :

Next, cd nextjs and install its dependencies with yarn install or npm install. Then, copy the .env.example file to .env.local and supply the URL of your backend api in the .env.local file :

NEXT_BACKEND_URL=http://localhost:8000

Important Note:

Generate any random key for CSRF_SECRET_KEY and add that value in the .env.local file.

IF YOU DONT SPECIFY THIS KEY YOUR APPLICATION WILL CRASH.

https://stackoverflow.com/questions/8855687/secure-random-token-in-node-js
CSRF_SECRET_KEY= //random crypto token

Run the application via npm run dev. The application will be available at http://localhost:3000

We are now done with the installation steps you can now explore the pages and all .

Now let’s take a deep dive On How This Starter Kit Works

(Behind The Scenes )

Laravel side:

We are actually using the same concept as Laravel Breeze but instead of dealing with session cookie we are returning tokens .

and we store that tokens in a Http Only Secure LAX cookies in Nextjs .

Nextjs SSR side:

we call these Laravel Apis in the Nextjs Backend and store the tokens in the Http Only cookies .

so How the Flow looks like ?

Calling APIs via Backend Proxy (Nextjs Backend)

We are treating Nextjs backend as a Proxy which will call our Laravel Backend Apis. kinda like BFF .

Instead of calling the API directly, our AJAX calls will go through an API Proxy — basically a thin layer in front of the actual API.

By using this method you can host your Laravel backend to any domain you want because we have Decoupled Frontend and Backend here, you just have to configure CORS thats it.

Secondly our Laravel backend Apis wont be exposed on the frontend as it hides the details of your backend servers from the client, adding a layer of security. It ensures that clients interact with the proxy, not the backend servers directly.

Technical Details (Data Fetching):

Currently we are using Axios for data fetching .
so if you want to call Laravel Backend Apis which requires Authentication
you have to call the below Axios instance :

import { createAxiosInstance } from "@/lib/axios";

// the access token will be automatically passed no need to pass it manually
// pages/api/invoices.js ←- Nextjs backend api

const axios = createAxiosInstance(req, res);
const response = await axios.get('/api/invoices'); ←- laravel backend api

Behind the scenes: The createAxiosInstance will automatically pass Bearer Tokens in the Headers.

and if the Access Token some how Expires it will refresh it with the Refresh Token and this will happen behind the scenes with Axios Interceptors .

Use this instance whenever you want to call a Laravel Backend Api which requires Authentication .

If you want to call Laravel Backend Apis which does not require authentication you can directly call it like this with

import axios from "axios";
the normal axios instance
// pages/api/users.js ←- Nextjs backend api
const response = await axios.get(`${process.env.NEXT_BACKEND_URL}/api/products`); ←- laravel backend api

Now this was for the Backend Apis but we also have to make sure our Apis are protected via csrf attacks so you can just simply wrap your Nextjs Api Route handlers with this wrapper to protect from csrf attacks .

// pages/api/login.js

import { withValidation } from "@/lib/withValidation";

const handler = async (req, res) => {
    if (req.method !== 'POST') {

      return res.status(405).json({ message: 'Method Not Allowed' });
    }
    

    // your business logic here
}

// verifyCsrfTokenCheck: true will be used to validate the CSRF token in our nextjs backend apis.
export default withValidation({ verifyCsrfTokenCheck: true })(handler);

What about Middlewares and User contexts ?

Laravel provides Several Middlewares like Guest , Auth, Verify email etc…

For calling GET Apis we usually use getServerSideProps of Nextjs.
But instead i have created a particular Get Server Side Wrapper (withAuth)

Which acts as a middleware and passing user context to view

so you can basically do it like this as a second param of withAuth wrapper you will get the user context and you can pass it as a prop if you want :

import { withAuth } from '@/lib/withAuth';

export const getServerSideProps = withAuth(async (context, user) => {
    const { req } = context;

    // if (!hasPermission(user, 'create post')) {

    //     // return redirect back to 403 page
    //     return {
    //         redirect: {
    //             destination: '/403',
    //             permanent: false,
    //         },
    //     };
    // }

    return {
        props: { user }, // Pass the user data to the page component
    };
});

By using this wrapper all the middleware checks will be applied and if you want to customize it

you can do it by adding the condition below . this will run first before the get server side function is called so you can handle any logic before the request reaches to the get server side props :

// src/lib/withAuth.js

const user = await getUserData();

const isProtectedRoute     = PROTECTED_ROUTES.includes(context.resolvedUrl);
const isGuestRoute         = GUEST_ROUTES.includes(context.resolvedUrl);
const isEmailVerifiedRoute = context.resolvedUrl.includes(VERIFY_EMAIL_ROUTE) || context.resolvedUrl.includes(EMAIL_VERIFICATION_ROUTE);

if (!user && isProtectedRoute) {
    // User is not authenticated and trying to access a protected route
    return {
        redirect: {
            destination: REDIRECT_IF_NOT_AUTHENTICATED,
            permanent: false,
        },
    };
}


// add more middlewares checks here

Some Configuration Settings

Suppose you changed the response key of your access tokens in your Laravel Login Api .

Now you also have to change it everywhere inside the Nextjs application, so to make it easier i have created a config file named (utils.js)

where you can change those key settings and it will be reflected everywhere .

Then we have the Route Service Provider file

which will be used to register the Protected and Guest routes Middlewares via withAuth wrapper.

If you want to add a new route which you want it to be protected you can add it here .

You can check more details about it here:

https://github.com/CODE-AXION/nextjs-ssr-laravel-kit?tab=readme-ov-file#route-service-provider

Lets talk about the some Minor points from Laravel Side and some Important information !

Important

→ If you want to customize verify email functionality you can refer to the Notifications/VerifyEmail.php file

Reset password url is set in the AuthServiceProvider.php file

ResetPassword::createUrlUsing(function ($user, string $token) {
    return config('app.frontend_url') . '/reset-password/' . $token . '?email=' . $user->email;
});

→ Default expiration time for tokens are set in the config/sanctum.php file

→ If you want you can change it (ALWAYS GIVE EXPIRATION TIME IN SECONDS or it may lead to unexpected behaviour).

→ Default Expiration time for Access token is 1 day and for Refresh token is 7 days.

Final Words

I made this starter starter kit because i could not find proper starter kit which has SSR authentication.

Initially I tried to made this with next-auth library but I found its implementation overly complex, especially for managing refresh tokens, cookie expiration, and other configurations, So Instead I created this starter kit to keep things simple and straightforward.

And Secondly i know … i know….
No Typescript … or App Router

I made this starter kit parallelly alongside with my ongoing work. and wanted the things fast and quick so i have not included typescript as it involves alot of time and work, and the reason i used pages router is because its easy to implement , a lot of applications are still using pages router . More Developers are familiar with it .

Look the thing is Pages router solves simpler problems and was developed slowly over many years. The App router is newer, was developed faster, and has to solve more complex problems. App router is a lot more impressive than pages, but like anything else, it needs time to mature. Depending on your project . Once it gets stable i will definitely switch to App Router.

If Someone is ready to contribute this project to convert it to typescript i will be more than happy . But i don’t think i will have time to convert the whole project to typescript maybe in future i guess … ?

Well Let me know your thoughts regarding this starter kit in the comments section .

— — — — — — — — — — — — — — See You In 2025 — — — — — — — — — — — — — — — —

Hello !!! my fellow core php and codeigniter developers this will be a huge time saver for ya because this concept is mostly used by core php and codeigniter devs who usually write raw SQL in their projects and even if you don’t know its okay we’ve got you covered here !

Well, Today i am gonna show you how can create JSON structures of one to one , one to many and many to many relationships .

Let’s Begin.

SQL provides 2 functions named JSON_ARRAYAGG And JSON_OBJECT and these functions can make our life a hell lot easier see the comparisons below of with using SQL functions and without using SQL functions.

This is a many to many relationship between product and tags and would look like this and this is what we want to achieve:

Now let’s see the comparisons how we can achieve this results both on code level and SQL level .

[
    {
        "id": 1,
        "name": "Marvel Tshirt",
        "created_at": null,
        "updated_at": null,
        "tags": [
            {
                "id": 4,
                "name": "Avengers"
            },
            {
                "id": 3,
                "name": "Red Color"
            },
            {
                "id": 5,
                "name": "Tshirt"
            }
        ]
    },
    {
        "id": 2,
        "name": "Roadster Full sleves tshirt",
        "created_at": null,
        "updated_at": null,
        "tags": [
            {
                "id": 3,
                "name": "Red Color"
            },
            {
                "id": 2,
                "name": "Full Sleeves"
            }
        ]
    }
]

Code Level Grouping (Even pagination won’t work here)

/** 
*     many to many relationship example
      product -> tags
      tag -> products
*/

$sql1 = "SELECT products.id,products.name as product_name,tags.id as tag_id ,tags.name as tag_name FROM products
        LEFT JOIN product_tag ON product_tag.product_id = products.id
        LEFT JOIN tags ON product_tag.tag_id = tags.id
    "; 
$results = \DB::select($sql1);
  foreach($results as $result)
  {
      if (!isset($data[$result->id])) {
      
          $data[$result->id] = [
              'name' => $result->product_name,
              'tags' => []
          ];
      }
      $data[$result->id]['tags'][] = $result->tag_name;
  }
return array_values($data);

The 1st SQL Will give us the result as follows.

You could simply do this: (SQL LEVEL Grouping )
Best part : pagination will work !

$sql1 = "SELECT products.*,
    (
        SELECT 
            JSON_ARRAYAGG(
                JSON_OBJECT(
                    'id', tags.id,
                    'name', tags.name
                )
            )
        FROM product_tag
        LEFT JOIN tags ON product_tag.tag_id = tags.id
        WHERE product_tag.product_id = products.id

    ) AS tags
FROM products";
$results = \DB::select($sql1);
foreach ($results as &$result) {
    
    $result->tags = json_decode($result->tags);
}
return $results;

2nd SQL Result will be printed like this :

as you can see in the above image all our tags information is now in JSON.

Now let’s understand first what is the difference between JSON_OBJECT and JSON_ARRAYAGG

JSON_OBJECT is a SQL function used to create JSON objects from key-value pairs. It allows us to generate JSON data directly within SQL queries and will give you only a JSON Object. Now in order to collect multiple json objects you would need JSON_ARRAYAGG .

JSON_ARRAYAGG collects values from multiple rows or a set of individual json objects and combines them into a single JSON array .

Let’s dive a little deep with the SQL :

// THE SQL
SELECT products.*,
(
    SELECT 
        JSON_ARRAYAGG(
            JSON_OBJECT(
                'id', tags.id,
                'name', tags.name
            )
        )
    FROM product_tag
    LEFT JOIN tags ON product_tag.tag_id = tags.id
    WHERE product_tag.product_id = products.id
) AS tags
FROM products

1. Outer SELECT Clause:

We start with a SELECT statement, retrieving all columns from the “products” table.

2. (Subquery part):

Within the outer SELECT statement, there’s a subquery which will retrieve tags associated with each product.

1. JSON_ARRAYAGG and JSON_OBJECT Functions ( for structuring JSON):

• Inside the subquery, JSON_ARRAYAGG is used to collect multiple tags of the products or you can say a set individual JSON objects.
• JSON_OBJECT is used to structure our JSON objects with key and value pairs (‘id’ and ‘name’) and here you have to mention the values that you actually want from the tags table. The syntax you can look in the above code, you just have to separate the keys by comma.

2. JOIN and WHERE Clauses (The actual Logic):

Note that without this logic it wont work:

• Now there is not much difference in the logic. Whatever you wrote in the previous query will be now shifted inside the subquery so instead of joining “product_tag” with the “products” table , you will now select the records from the “product_tag” table and join it with the “tags” table to retrieve the tags information.
• And the where clause will filters records based on the condition that “product_id” matches the “id” of products from the outer query.
  which will give us the the products associated with tags
• and finally we will join it with the tags table
  where “product_tag.tag_id = tags.id” , which will give us the information of the tags table .

// BEFORE
SELECT 
        products.id,products.name as product_name,
        tags.id as tag_id ,tags.name as tag_name 
FROM products
    LEFT JOIN product_tag ON product_tag.product_id = products.id
    LEFT JOIN tags ON product_tag.tag_id = tags.id;

// AFTER
SELECT products.*,
(
    SELECT 
        JSON_ARRAYAGG(
            JSON_OBJECT(
                'id', tags.id,
                'name', tags.name
            )
        )
    FROM product_tag 
    LEFT JOIN tags ON product_tag.tag_id = tags.id
    WHERE product_tag.product_id = products.id
) AS tags
FROM products

3. Alias:

• The JSON array generated by the subquery has to be aliased for eg:- as “tags”

PHP side:

Here you just have to decode the JSON array like this:

$results = \DB::select($sql1);

foreach ($results as &$result) {
    
    $result->tags = json_decode($result->tags);
}
return $results;

which will output the below JSON .

[
    {
        "id": 1,
        "name": "Marvel Tshirt",
        "created_at": null,
        "updated_at": null,
        "tags": [
            {
                "id": 4,
                "name": "Avengers"
            },
            {
                "id": 3,
                "name": "Red Color"
            },
            {
                "id": 5,
                "name": "Tshirt"
            }
        ]
    },
    {
        "id": 2,
        "name": "Roadster Full sleves tshirt",
        "created_at": null,
        "updated_at": null,
        "tags": [
            {
                "id": 3,
                "name": "Red Color"
            },
            {
                "id": 2,
                "name": "Full Sleeves"
            }
        ]
    }
]

I have listed some other examples of 1:1 & 1:Many structuring JSON in SQL

1 to 1 Example: (User has One Product | Product belongs to a User )

Note: No need to write JSON_ARRAYGG here because we don’t want a list right we just want an object so JSON_OBJECT .

$sql1 = "SELECT products.id, products.name,
      (
          SELECT 
              JSON_OBJECT(
                  'id', users.id,
                  'name', users.name,
                  'email', users.email
              )
          FROM users
          WHERE users.id = products.user_id
) AS users
FROM products";

$results = \DB::select($sql1);

Output:

[
    {
        "id": 1,
        "name": "Marvel Tshirt",
        "users": {
            "id": 1,
            "name": "John Doe",
            "email": "johndoe11@gmail.com"
        }
    },
    {
        "id": 2,
        "name": "Roadster Full sleves tshirt",
        "users": {
            "id": 2,
            "name": "Richard Parker",
            "email": "richard88@gmail.com"
        }
    }
]

1 to many example: (User has many Products | Product Belongs to User)

$sql1 = "SELECT users.id, users.name,users.email,
    (
        SELECT 
            JSON_ARRAYAGG(
                JSON_OBJECT(
                    'id', products.id,
                    'name', products.name
                )
            )
        FROM products
        WHERE products.user_id = users.id
) AS products
FROM users";

$results = \DB::select($sql1);

Output

[
    {
        "id": 1,
        "name": "John Doe",
        "email": "johndoe11@gmail.com",
        "products": [
            {
                "id": 1,
                "name": "Marvel Tshirt"
            },
            {
                "id": 3,
                "name": "Hoodies"
            }
        ]
    },
    {
        "id": 2,
        "name": "Richard Parker",
        "email": "richard88@gmail.com",
        "products": [
            {
                "id": 2,
                "name": "Roadster Full sleves tshirt"
            }
        ]
    }
]

All Examples are given here in this repository so you can refer to it !

GitHub - CODE-AXION/RAW_SQL_Json_Structures_Examples: Set of JSON_ARRAYAGG & JSON_OBJECT SQL Examples

Thank you for reading this article ! and i hope you learned something new !

Happy Coding …

So livewire 3 is here and I just upgraded by version yesterday and took me hour to fix the breaking changes and while making changes I noticed that it automatically injects alpine and livewire scripts in every page.

Well I referred to the docs and all and I saw that livewire has to be injected in every page and I was like why so , it will be huge headache in performance and even in my website I am only using livewire for 1 page which is ecommerce shop page filter and I don’t want to include livewire scripts in every page .

I searched online , went to GitHub issues and found nothing …

I figured how bout we only include alpine scripts in normal pages and livewire scripts in livewire page along with alpine functioning .

Let me show you !

If you see if it was that simple we could use import like this :

if($condition)
{
     import Alpine from 'alpinejs'

     // YOUR ALPINE JS CODE

     Alpine.start()
}

but this wont work so we have to use dynamic imports , I bet you might not have heard about this but its kinda cool ! !

The import(module) expression loads the module and returns a promise that resolves into a module object that contains all its exports. It can be called from any place in the code.

We can use it dynamically in any place of the code, for instance:

let modulePath = prompt("Which module to load?");

import(modulePath)
  .then(obj => <module object>)
  .catch(err => <loading error, e.g. if no such module>)

so in our case it would be :

BEFORE:

APP.JS

require('./bootstrap');

import Alpine from 'alpinejs';

window.Alpine = Alpine;
let csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    
Alpine.store('cartSettings', {}) // <-- YOUR ALPINE JS CODE

Alpine.start();

AFTER:

APP.JS

require('./bootstrap');

let csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

if(!route().current('shop.page'))
{
    import('alpinejs').then((module) => {
        window.Alpine = module.default
        Alpine.store('cartSettings', {}) // <-- YOUR ALPINE JS CODE
        Alpine.start();
    });
}else{
    
    Alpine.store('cartSettings', {}) // <-- YOUR ALPINE JS CODE
}

and the view that you would be using LIVEWIRE 3 Component:

resources/views/shop-page.blade.php

shop-page.blade.php

<x-app-layout>

  LIVEWIRE COMPONENT --> @livewire('shop-page-component',['filter_type'=>$filter_type,'filter_slug' =>$filter_slug , 'filter_id' => $filter_id, 'category' => $category ?? false])

    @push('styles') 
        @livewireStyles
    @endpush

    @push('scripts')
        @livewireScripts
    @endpush

</x-app-layout>

Do not store data in JSON, use columns, this is why they are there.

You are using relational database to store your data, use the features what those softwares are providing to store and organize your data.

Storing values in their separate columns, allows you to perform different aggregations, filtering on those columns without the overhead of parsing a non-relational data structure (most probably using a third party plugin/clr/function/whatever).

Additionally JSON data has no fixed structure. You can not verify the consistency of the data stored in the JSON field without parsing the field and writing custom validations.

It maybe easy to store data with variable or complex structure, but it comes at a cost.

Queries against JSON data are more complex than traditional SQL queries against normal rows and columns. As i said It’s harder to learn to search or sort data stored in JSON. Not impossible — but it’s a totally different type of query. If you don’t have experience with this yet, you will experience a steep learning curve.

Storing multiple data in one field also means, you can not (or not easy to)

• use constraints on the embedded fields
• you can not enforce the structure, valid ranges, valid values for each fields for the embedded fields
• define the data type of the embedded fields
• index the data
• aggregate/search in those fields
• scale the system
• Normalize your data model and everything will be more efficient (alot of people ignore this)

The database server can not

• keep track of index statistics for each fields
• optimize queries using the JSON field (because of the string manipulations required to extract data)
• can not store the data for each field optimally.

The above things are important, but none of the lists are complete.

What will you win?

• Some field names.
• Some flexibility in the database, but much more complex functions in the application, because all the validations should be done in the application twice — when you want to write and when you are reading the data.
• A huge headache when you have to fix something in the JSON field.

As a note: the format you choose for storing the data is opinion based of course, but as a rule of thumb, use traditional columns whenever they can satisfy your needs and avoid using serialized data. Especially if you want to use only some parts of it for any kind of calculation.

And if it comes to performance you have designed indexes well to support your queries, MySQL can handle hundreds of millions of rows per table. Tables typically start to get hard to scale when you have over 1 billion (1e9) rows.

When can you store serialized data: When it is not important to enforce the consistency and you will NEVER use it for statistical queries or for filtering. (However, in most cases, the never part is not true :))

Use JSON if you have information that is rarely changed, or if your application expects JSON. In this case you will optimize read and load performance.

Thank You For Reading this Article !

In This Article I have Described How You Can Handle Authorization With Spatie Permission Package And Give Permissions To Different Roles And Restrict Certain Areas And Features With Laravel Authorization Methods

And Believe me its really easy peasy …

Lets do the Installation and stuffs

Install the Spatie Permission Package with these commands :

//Install the package
 composer require spatie/laravel-permission

//Register the provider in the config/app.php
'providers' => [
    // ...
    Spatie\Permission\PermissionServiceProvider::class,
];

//This will generate the necessary migrations for the package and the config file 
php artisan vendor:publish --provider="Spatie\Permission\PermissionServiceProvider"


php artisan optimize:clear
# or
php artisan config:clear


php artisan migrate // will migrate the neccessary tables required for this package

User Model Should Have HasRole Trait:

use Illuminate\Foundation\Auth\User as Authenticatable;
use Spatie\Permission\Traits\HasRoles;

class User extends Authenticatable
{
    use HasRoles;

    // ...
}

Now we are gonna create some permissions in the permissions table .

Imp: Make Sure To First Add The “ MODULE Name “ With The DOT NOTATION And The OPERATION Name Like This :

Module Name: categories
Operation Name: create

Final: categories.create

This is gonna help to display the “add permissions to roles ” settings category wise like this :

Now lets create the RoleController with the “ php artisan make:controller RoleController “ command. We don’t need to create the model for roles or permissions as we already have it in our package and we can use them with “use Spatie\Permission\Models\Role ”. Lets create some methods for our Role controller .

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use Spatie\Permission\Models\Role; <--- ROLE MODEL
use Spatie\Permission\Models\Permission; <---- PERMISSION MODEL

class RoleController extends Controller
{
    public function allRoles()
    {
    
    }

    public function create()
    {
    
    }

    public function store(Request $request)
    {
    
    }

    public function edit($id)
    {
    
    }

    public function update(Request $request, $id)
    {

    }

    public function delete($id)
    {
    
    }

}

Lets take a look at create roles page and how to display it like this :

Create method :

public function create()
{
    \DB::statement("SET SQL_MODE=''");;
    $role_permission = Permission::select('name','id')->groupBy('name')->get();

    $custom_permission = array();

    foreach($role_permission as $per){

        $key = substr($per->name, 0, strpos($per->name, "."));

        if(str_starts_with($per->name, $key)){
         
            $custom_permission[$key][] = $per;
        }

    }
 
    return view('admin.roles.create')->with('permissions',$custom_permission);
}

Take a look at how we are gonna create this array:

1. $role_permission = Permission::select('name','id')->groupBy('name')->get();:This selects only the name and id columns from the permissions table, and groups the results by the name column and finally, it fetches all the results :

Example :-

2. $custom_permission = array();: This initializes an empty array called $custom_permission which will be used to store custom permissions later in the code.

   foreach($role_permission as $per){

        $key = substr($per->name, 0, strpos($per->name, "."));

        if(str_starts_with($per->name, $key)){
            $custom_permission[$key][] = $per;
        }

    }

3. $key = substr($per->name, 0, strpos($per->name, "."));: This line extracts the substring from the beginning of the name field of the current $per item, up to the first occurrence of a period (".") character. This is done using the substr() and strpos() functions in PHP, and the resulting substring is stored as the $key .

4. if(str_starts_with($per->name, $key)){ ... }: It then checks if the ‘name’ column string starts with the extracted $key using the str_starts_with() function. eg:- like this :

if categories.create starts with categories which is true 
   (categories == categories.create) ==> true

Some defination of str_starts_with.

str_starts_with($string, $substring) 
Parameters:

$string: This parameter refers to the string whose starting string needs to be checked.
$substring: This parameter refers to the string that needs to be checked.

Return Type: If the string begins with the substring then str_starts_with() will return TRUE otherwise it will return FALSE.  

5. If it does, it proceeds to add the record to the $custom_permission array using $key as the array key which is the categories and the $per as the object.

So it will look like this :

This is used as a grouping mechanism to group permissions with similar prefixes together in the $custom_permission array.

We can access the $custom_permission array and can use it to display custom permissions grouped by their prefixes.

Now lets display this in view

create.blade.php:

<div class="ml-4 mt-16 w-9/12">
  <form action="{{route('roles.store')}}" method="POST">
      @csrf
  
      <h1 class="text-3xl mt-4 mb-8"> Create Role </h1>

      <div class="mb-6">
          <label for="text" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Role Name</label>
          <input type="text" value="{{old('name')}}" name="name" id="email" class="bg-gray-50 w-80 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 " placeholder="User, Editor, Author ... " >
          
          @foreach ($errors->get('name') as $error)
              <p class="text-red-600">{{$error}}</p>
          @endforeach
      </div>

      <table class="permissionTable border rounded-md bg-white overflow-hidden shadow-lg my-4 p-4">
          <th class="px-4 py-4">
              {{__('Section')}}
          </th>

          <th class="px-4 py-4">
              <label>
                  <input class="grand_selectall" type="checkbox">
                  {{__('Select All') }}
              </label>
          </th>

          <th class="px-4 py-4">
              {{__("Available permissions")}}
          </th>



          <tbody>
          @foreach($permissions as $key => $group)
              <tr class="py-8">
                  <td class="p-6">
                      <b>{{ ucfirst($key) }}</b>
                  </td>
                  <td class="p-6" width="30%">
                      <label>
                          <input class="selectall" type="checkbox">
                          {{__('Select All') }}
                      </label>
                  </td>
                  <td class="p-6">

                      @forelse($group as $permission)

                      <label style="width: 30%" class="">
                          <input name="permissions[]" class="permissioncheckbox" class="rounded-md border" type="checkbox" value="{{ $permission->id }}">
                          {{$permission->name}} &nbsp;&nbsp;
                      </label>

                      @empty
                          {{ __("No permission in this group !") }}
                      @endforelse

                  </td>

              </tr>
          @endforeach
          </tbody>
      </table>


      <button type="submit" class="text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 shadow-lg shadow-blue-500/50 dark:shadow-lg dark:shadow-blue-800/80 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2 ">
          Create Role
      </button>

  </form>
</div>

Now in order to get the select all feature working paste this code inside script tag in create.blade.php:

$(".permissionTable").on('click', '.selectall', function () {

    if ($(this).is(':checked')) {
        $(this).closest('tr').find('[type=checkbox]').prop('checked', true);

    } else {
        $(this).closest('tr').find('[type=checkbox]').prop('checked', false);

    }

    calcu_allchkbox();

});

$(".permissionTable").on('click', '.grand_selectall', function () {
    if ($(this).is(':checked')) {
        $('.selectall').prop('checked', true);
        $('.permissioncheckbox').prop('checked', true);
    } else {
        $('.selectall').prop('checked', false);
        $('.permissioncheckbox').prop('checked', false);
    }
});

$(function () {

    calcu_allchkbox();
    selectall();

});

function selectall(){

    $('.selectall').each(function (i) {

        var allchecked = new Array();

        $(this).closest('tr').find('.permissioncheckbox').each(function (index) {
            if ($(this).is(":checked")) {
                allchecked.push(1);
            } else {
                allchecked.push(0);
            }
        });

        if ($.inArray(0, allchecked) != -1) {
            $(this).prop('checked', false);
        } else {
            $(this).prop('checked', true);
        }

    });
}

function calcu_allchkbox(){

    var allchecked = new Array();

    $('.selectall').each(function (i) {


        $(this).closest('tr').find('.permissioncheckbox').each(function (index) {
            if ($(this).is(":checked")) {
                allchecked.push(1);
            } else {
                allchecked.push(0);
            }
        });


    });

    if ($.inArray(0, allchecked) != -1) {
        $('.grand_selectall').prop('checked', false);
    } else {
        $('.grand_selectall').prop('checked', true);
    }

}



$('.permissionTable').on('click', '.permissioncheckbox', function () {

    var allchecked = new Array;

    $(this).closest('tr').find('.permissioncheckbox').each(function (index) {
        if ($(this).is(":checked")) {
            allchecked.push(1);
        } else {
            allchecked.push(0);
        }
    });

    if ($.inArray(0, allchecked) != -1) {
        $(this).closest('tr').find('.selectall').prop('checked', false);
    } else {
        $(this).closest('tr').find('.selectall').prop('checked', true);

    }

    calcu_allchkbox();

});

Store method :

Now we will create the role method and we will attach the permissions to the roles using givePermissionTo() method .

public function store(Request $request)
{
    $request->validate([

        'name' => 'required',
    ]);

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

    if($request->permissions){

        foreach ($request->permissions as $key => $value) {
            $role->givePermissionTo($value);
        }
    }

    return redirect()->route('roles.all');
}

Edit Method:

 public function edit($id)
    {
       
        $role = Role::with('permissions')->find($id);

        \DB::statement("SET SQL_MODE=''");
        $role_permission = Permission::select('name','id')->groupBy('name')->get();


        $custom_permission = array();

        foreach($role_permission as $per){

            $key = substr($per->name, 0, strpos($per->name, "."));

            if(str_starts_with($per->name, $key)){
                $custom_permission[$key][] = $per;
            }

        }

        return view('admin.roles.edit',compact('role'))->with('permissions',$custom_permission);
    }

edit.blade.php:

   <div class="ml-4 mt-16 w-9/12">
        <form action="{{route('roles.store')}}" method="POST">
            @csrf
        
            <h1 class="text-3xl mt-4 mb-8"> Update Role </h1>

            <div class="mb-6">
                <label for="text" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Role Name</label>
                <input type="text" value="{{old('name',$role->name ?? '')}}" name="name" id="email" class="bg-gray-50 w-80 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 " placeholder="Wedding, Kitty kat, parties, lol deaths haha" >
                
                @foreach ($errors->get('name') as $error)
                    <p class="text-red-600">{{$error}}</p>
                @endforeach
            </div>

            <table class="permissionTable border rounded-md bg-white overflow-hidden shadow-lg my-4 p-4">
                <th class="px-4 py-4">
                    {{__('Section')}}
                </th>

                <th class="px-4 py-4">
                    <label>
                        <input class="grand_selectall" type="checkbox">
                        {{__('Select All') }}
                    </label>
                </th>

                <th class="px-4 py-4">
                    {{__("Available permissions")}}
                </th>



                <tbody>
                @foreach($permissions as $key => $group)
                    <tr class="py-8">
                        <td class="p-6">
                            <b>{{ ucfirst($key) }}</b>
                        </td>
                        <td class="p-6" width="30%">
                            <label>
                                <input class="selectall" type="checkbox">
                                {{__('Select All') }}
                            </label>
                        </td>
                        <td class="p-6">

                            @forelse($group as $permission)

                            <label style="width: 30%" class="">
                                <input  {{ $role->permissions->contains('id',$permission->id) ? "checked" : "" }} name="permissions[]" class="permissioncheckbox" class="rounded-md border" type="checkbox" value="{{ $permission->id }}">
                                {{$permission->name}} &nbsp;&nbsp;
                            </label>

                            @empty
                                {{ __("No permission in this group !") }}
                            @endforelse

                        </td>

                    </tr>
                @endforeach
                </tbody>
            </table>


            <button type="submit" class="text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 shadow-lg shadow-blue-500/50 dark:shadow-lg dark:shadow-blue-800/80 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2 ">
                Update Role
            </button>
        </form>
    </div>

Update method :

Multiple permissions can be synced to a role using syncPermissions method:

public function update(Request $request, $id)
{
    
    $role = Role::where('id',$id)->first();

    $request->validate([
        'name' => 'required'
    ]);

    $role->update([
        "name" => $request->name
    ]);

    $role->syncPermissions($request->permissions);


    return redirect()->route('admin.roles.all')->with('success','Roles Updated Successfully');
}

Delete method :

public function delete($id)
{
    $role = Role::where('id',$id)->first();

    if(isset($role)){
        
        $role->permissions()->detach();
        $role->delete();

        return redirect()->route('roles.all')->with('success','Roles Deleted Successfully');

    }
}

index.blade.php:

<div class="flex flex-col mt-6">
  <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
      <div class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
          <div class="overflow-hidden border border-gray-200 dark:border-gray-700 md:rounded-lg">
              <table id="eventstable" class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                  <thead class="bg-gray-50 dark:bg-gray-800">
                      <tr>
                          <th scope="col" class="py-3.5 px-4 text-sm font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400">
                              <div class="flex items-center gap-x-3">
                                  <input type="checkbox" class="text-blue-500 border-gray-300 rounded dark:bg-gray-900 dark:ring-offset-gray-900 dark:border-gray-700">
                                  <span>Id</span>
                              </div>
                          </th>

                          <th scope="col" class="px-12 py-3.5 text-sm font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400">
                              <button class="flex items-center gap-x-2">
                                  <span>Role Name</span>
                              </button>
                          </th>

                          <th scope="col" class="px-4 py-3.5 text-sm font-normal text-left rtl:text-right text-gray-500 dark:text-gray-400">
                              <button class="flex items-center gap-x-2">
                                  <span>Permissions</span>
                              </button>
                          </th>


                          <th scope="col" class="relative py-3.5 px-4">
                              <span class="sr-only">Edit</span>
                          </th>
                     
                      </tr>
                  </thead>
                  <tbody class="bg-white divide-y divide-gray-200 dark:divide-gray-700 dark:bg-gray-900">
                      
                      @foreach ($roles as $role)
                          
                      <tr>
                          <td class="px-4 py-4 text-sm font-medium text-gray-700 whitespace-nowrap">
                              <div class="inline-flex items-center gap-x-3">

                                  <div class="flex items-center gap-x-2">
                                      <div>
                                          <h2 class="font-medium text-gray-800 dark:text-white ">{{$loop->iteration}}</h2>
                                      </div>
                                  </div>
                              </div>
                          </td>
                          <td class="px-4 py-4 text-sm text-gray-500 dark:text-gray-300 whitespace-nowrap">{{$role->name}}</td>
                          <td class="px-4 py-4 text-sm text-gray-500 dark:text-gray-300 whitespace-nowrap">
                              <div class="flex items-center flex-wrap gap-2">
                                  @foreach ($role->permissions as $permission)
                                      <div class="rounded-full bg-indigo-400 px-2 py-0.5 text-indigo-200 font-semibold">{{$permission->name}}</div>
                                  @endforeach
                              </div>
                          </td>

                          
                          <td class="px-4 py-4 text-sm whitespace-nowrap">
                              <div class="flex items-center gap-x-6">

                                  <a href="{{route('roles.edit',$role->id)}}" class="block text-gray-500 transition-colors duration-200 dark:hover:text-yellow-500 dark:text-gray-300 hover:text-yellow-500 focus:outline-none">
                                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                                          <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
                                      </svg>
                                  </a>

                                  <form method="POST" action="{{route('roles.delete',$role->id)}}">
                                      @csrf
                                      @method('DELETE')
                                      
                                      <button type="submit" class="text-gray-500 transition-colors duration-200 dark:hover:text-red-500 dark:text-gray-300 hover:text-red-500 focus:outline-none">
                                          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                                              <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
                                          </svg>
                                      </button>
                                  </form>
                              </div>
                          </td>
                      </tr>

                      @endforeach
                  </tbody>
              </table>
          </div>
      </div>
  </div>
</div>

Now in order to make this work we can attach roles to the users using assignRole method :

$user->assignRole('Seller');

So lets say if you create a role and attach the permissions of creating the categories and viewing the categories .

Now in Spatie permissions package all the permissions will have gates assigned to them so you can do this to prevent users to access certain areas

Lets say if you want that only the role with the permissions of the categories create can only view the create category page/sections so you can do it like this :

In Blade

@can('categories.create')
      <div class="ml-auto px-3 py-1  text-blue-600 bg-blue-100 rounded-md">
          <a href="{{route('categories.create')}}">Category Create</a>
      </div>
@endcan

//=============== OR FOR CHECKING MULTIPLE ABILITIES/PERMISSIONS ========== //

@canany(['categories.create', 'categories.delete'])
    <div class="actions">
        @can('categories.edit')
            <button>Edit</button>
        @endcan
        @can('categories.delete')
            <button>Delete</button>
        @endcan
    </div>
@endcanany

In Controller:

public function createCategory()
{
    $this->authorize('categories.create');

    ================= OR =================

    if (Gate::allows('categories.create')) {
        // User is authorized, perform the action
    } else {
        abort(403); // Or redirect, or return an error response, depending on your needs
    }

    return view('admin.categories.create');
} 

When Using the Middleware:

Route::group(['middleware' => ['can:categories.create']], function () {
    //
});

While storing/updating the data with Form Request Class:

Requests/StoreCategories.php

 public function authorize(): bool
 {
    switch ($this->method()) {
        case 'POST':
            return $this->user()->can('categories.create');

            break;

        case 'PUT':
            return $this->user()->can('categories.edit');

            break;
    }

    return true;
}

Defining Super Admin:

If you want a “Super Admin” role to respond true to all permissions, without needing to assign all those permissions to a role, you can use Laravel's Gate::before() method. For example:

use Illuminate\Support\Facades\Gate;

class AuthServiceProvider extends ServiceProvider
{
    public function boot()
    {
        $this->registerPolicies();
        // Implicitly grant "Super Admin" role all permissions
        // This works in the app by using gate-related functions like auth()->user->can() and @can()
        Gate::before(function ($user, $ability) {
            return $user->hasRole('Super Admin') ? true : null;
        });
    }
}

NOTE: Gate::before rules need to return null rather than false, else it will interfere with normal policy operation

Best Practices from Spatie Permissions Package :

Roles are best to only assign to Users in order to “group” people by “sets of permissions”.

Permissions are best assigned to roles. The more granular/detailed your permission-names (such as separate permissions like “view document” and “edit document”), the easier it is to control access in your application.

Users should rarely be given “direct” permissions. Best if Users inherit permissions via the Roles that they’re assigned to.

When designed this way, all the sections of your application can check for specific permissions needed to access certain features or perform certain actions AND this way you can always use the native Laravel @can and can() directives everywhere in your app, which allows Laravel's Gate layer to do all the heavy lifting.

I hope you thoroughly enjoyed reading this article.

What is Method Chaining ?

Method chaining is a powerful technique in object-oriented programming that allows you to call multiple methods on the same object in a single line of code. It’s a great way to streamline your code and make it more readable and maintainable so instead of this :

we can do this:

See its looks much more Cleaner and Readable .

So how can we achieve this ?

To implement method chaining, each method must return the object instance using the $this keyword at the end of the method like this :

class MyClass {

  private $property1;
  private $property2;

  public function sum1($value) {
    $this->property1 = $value;
    return $this; <---- returns the object instance 
  }

  public function sum2($value) {
    $this->property2 = $value;
    return $this; <---- returns the object instance
  }

  public function getResult() {
    $result = $this->property1 + $this->property2;
    return $result;
  }
}


$result = (new MyClass)->sum1(10)->sum2(20)->getResult();

dd($result);

//result: 30

The last line of code creates a new instance of the MyClass class using the parentheses and then immediately calls the sum1() method with the argument 10. This returns the object instance, which is then used to call the sum2() method with the argument 20. This also returns the object instance, which is then used to call the getResult() method. The value of $property1 is 10 and the value of $property2 is 20, so the getResult() method returns 30.

Well How can we use this in real life case ?

Suppose you have 4 tasks to do :

1. Create User

2. Attach Roles

3. Create User Company

4. Finally, get the user

Now let’s do this with method chaining .

Let’s create a user Service class called ‘ UserService’ in App\Services folder .

Here we will define some methods which will be :
createUser(), handleRole(), createCompany(), getUser().

As you can see on the first method we are creating the user by passing the request object in the parameter and after that we assign the newly created user to the user property by using :

$this->user = $user <--- assign the newly created user to user property  

and then we return the object itself which helps us to allow method chaining further.

Now as the user property has now our user object , we can attach the roles of that user in handleRole method and return the instance .

$this->user->roles()->attach([2,5]) <--- we can even attach eloquent methods 

You can see more about chaining methods examples on this article:

Article: Tired of Writing Image Upload Code ? Create this Reusable Service In Laravel .

Now in createCompany method , as our user object is still present in user property we can create the company by passing the request object in createCompany method and pass the user_id foreign key from the user property if you want you can even pass the request object in the constructor method . After creating the company we will return $this which will allow for method chaining again .

After creating the company we have the getUser() method which will get our currently created user .

To try this service we can chain these methods in our controller like this :

Now in $user variable we will have the newly created user.

Hopefully, you have gained a better understanding of how method chaining is applied in real-life situations.

If you liked this article, let me know what topic I should cover in the next one …

Happy Coding : )

Do you write image upload code ? if yes what do you do if you want to use the that code for 2 to 3 different models you make different service classes to do it right ? But, what if I told you that instead of creating multiple services, you could create just one service that can be used across all multiple sections ? , wouldn’t it be cool ?

Lets start by creating a service called ImageUploadService.php in the Services folder .

Now lets define a constructor in this class which will accept 3 parameters .

1st. Object type declaration as a parameter which will be the object of the model which we are gonna use for the image upload .

2nd. The actual image file which we we will get from the form .

3rd. The path where we will store the image in the public folder .

<?php

namespace App\Services;

class ImageUploadService{

  public $image;
  public $path;
  public $obj;
  
  function __construct(object $obj,$image = null,$path = null) //accepts object as a parameter
  {    
      $this->obj = $obj; <-------- Your Model Object eg:- Product
      $this->image = $image; <---- Your image file from the form   
      $this->path = $path; <------ Your path where you want to store that file
  }

}

Now first lets define imageUpload() method.

First we will check if the image exists and is not null and after that we will store the image to the folder by using the store() method and specifying the path in the parameter of where we want to put that image, the path will be the same which we defined in the constructor and finally we will return the object it self.

<?php

namespace App\Services;

class ImageUploadService{

  public $image;
  public $path;
  public $obj;
  
  function __construct(object $obj,$image,$path) //accepts object as a parameter
  {    
      $this->obj = $obj; <-------- Your Model Object eg:- Product
      $this->image = $image; <---- Your image file from the form   
      $this->path = $path; <------ Your path where you want to store that file
  }


  public function uploadImage()
  {

      if($this->image && $this->image !== null){

          //you can use store method to store the image to the folder
          //by specifying the image path .

          $this->image->store('public/'. $this->path . '/'); 
          
          return $this;
      }           

      return $this;
  }


}

This section is storing the image to the folder now we have to save that image to the database.

Lets define 2nd method which is storeImageDB() .

Now storeImageDB() method will accept 1 parameter which will be the column name of where you want to store the image path.

so the fieldName would be dynamic it could be anything like avatar, profile, logo etc…

We cannot hard code the property like this : $this->obj->avatar

so in order to make this property dynamic we could using curly braces around the object property like this :

$dynamicProperty = 'avatar'; 

$this->obj->{$dynamicProperty} <------ results as : $this->obj->avatar

The next step is to define which object property we will use to store the image, which is : $this->obj->avatar

and the value would be the path + the image name added with md5 hash and we will return the object .

and later on we will execute this line on the controller which will save the image to the DB .

public function storeImageDB($fieldName)
{

  if($fieldName && $this->image){
                            
    $this->obj->{$fieldName} = $this->path . '/' . $this->image->hashName();

    //result: $this->obj->avatar = '/product_images/0Dq4n3h0frEhi8AQCJULdtz.png/'
    
    return $this->obj;
  }

  return $this;
}

Now lets write code for deleting the image .

Lets define deleteImage() method:

This method will also accept one parameter, which is of course the field name, since we are checking if the object property product->avatar image exists in both the database and the folder . If it is we will delete the image by using the unlink() method .

public function deleteImage($fieldName)
{
    $storePath = public_path('storage/'. $this->obj->{$fieldName}); 

    if($this->obj->{$fieldName} && file_exists($storePath)){

        //unlink method will delete the image from the folder
        unlink(public_path('storage/'.$this->obj->{$fieldName}));
    
        return $this;
    }

    return $this;
    
}

So now our Service is ready to use !

but you will be like, ‘well hey ! you only showed us how to upload the image and delete the image , where is the update image part ? ’

You don’t need the update image method . confused ?

Well if you see for uploading the image we go in a pattern like this:

uploadImage -> storeImage to Database

But if you wanna update the image and delete the previous image you can go like this:

deleteImage -> uploadImage -> storeImage to Database

So let me show how to use this method in the controller .

For Uploading The Image:

public function storeProduct(Request $request)
{
//Do Some Validation.
$validator = $request->validate([

  "name" => ['required'],
  "server_image" =>['image','max:2048'],
]);
 
//Create the product 
---> Model instance $product = Product::create([
    "name" => $request->name,
]);

  
$image = $request->file('server_image'); <--- the image file
$path = 'product_images'; <---- the path where we want to store the image to a folder

//Assign those values to constructor which is the model instance,the image and the path
$imageservice = new ImageUploadService($product,$image,$path);

//we will upload the image first and we will store that image to the database
$imageservice->uploadImage()->storeImageDB('server_image'); //<--- the field where you want to store the value in the table.

//Save the values to the database
$product->save();

}

For Updating the Image:

public function updateProduct(Request $request,$id)
{

$product = Product::findOrFail($id);

$product->name = $request->name;
   
//first we will check if the request has an image or not, if not we will not update the image
if (request()->hasFile('server_image') && request('server_image') != '') {
  
  //we will assign the model again, specify the file as the 2nd parameter
  //and the 3rd parameter as the path
  $imageservice = new ImageUploadService($product,$request->server_image,'product_images');
          
  //now to update the image 
  //first delete the image of the product
  //then upload the new image to the folder
  //and save that image to the database
  $imageservice->deleteImage('server_image')->uploadImage()->storeImageDB('server_image');
  
}

$product->update(); //update the product

}

For Deleting the Image:

public function deleteProduct($id)
{
  $product = Product::findOrFail($id);

  $imageservice = new ImageUploadService($product); //assign the model 
  $imageservice->deleteImage('server_image'); //and delete the image from the folder
}

I hope you find this article useful , do give it a share among communities and members .

Happy Coding !

Today i am gonna show you how to Organize Your Routes for the Large or Small Projects .

1st. Organize routes to separate files .

You might be having difficulty in organizing your routes in the web.php file, as all routes are clubbed into one single file and it can be a real hassle to find specific routes. For example, it may become challenging to differentiate between the admin routes, user routes, and role routes etc… , especially when you have a long list of routes in your web.php file and you may find yourself scrolling through numerous sections to find the specific route you’re looking for, which can be time-consuming and frustrating .

well i have an idea for you !

Suppose you have seller routes , buyer routes , admin routes ,user routes and some miscellaneous routes (notification, email) etc… now each of them contain more than 10 + routes , what you can do is create separate folders inside routes folder with the naming like this :

now as you have separated your routes into folders then it should work right ? No !

In order to make this work you have to define those routes in boot method in RouteServiceProvider.php just like this

public function boot()
{
    $this->configureRateLimiting();

    $this->routes(function () {
        Route::middleware('api')
            ->prefix('api')
            ->group(base_path('routes/api.php'));

        Route::middleware('web')
            ->namespace($this->namespace)
            ->group(base_path('routes/web.php'));

    //-------------- NEW ROUTES ---------------------//
        Route::middleware(['web','auth','admin'])
            ->namespace($this->namespace)
            ->group(base_path('routes/admin/admin.php'));

        Route::middleware(['web','auth','seller'])
            ->namespace($this->namespace)
            ->group(base_path('routes/seller/seller.php'));

        Route::middleware(['web','auth','buyer'])
            ->namespace($this->namespace)
            ->group(base_path('routes/buyer/buyer.php'));

        Route::middleware(['web','auth'])
            ->namespace($this->namespace)
            ->group(base_path('routes/misc/misc.php'));
    });
}

Here in middleware method you can give the middleware name of what middleware you wanna use and in the group path you will define your route file path .

This is the one way actually or you could just simply include the file just like this:

require __DIR__.'/admin/admin.php';

Well if you use the first idea you could get an idea how much Laravel framework is just capable of .

2nd. Using Route Controller method and Middleware method

Here you may see that are there several routes that are using the same controller and same Middlewares , this goes against DRY (Dont Repeat Yourself )Principle.

Bad:

Route::get('/admin/categories/index', [CategoryController::class, 'index'])->name('admin.category.index')->middleware(['auth','admin']);
Route::get('/admin/categories/create', [CategoryController::class, 'create'])->name('admin.category.create')->middleware(['auth','admin']);
Route::POST('/admin/categories/index', [CategoryController::class, 'store'])->name('admin.category.store')->middleware(['auth','admin']);
Route::get('/admin/categories/edit/{category}', [CategoryController::class, 'edit'])->name('admin.category.edit')->middleware(['auth','admin']);
Route::PUT('/admin/categories/update/{category}',[CategoryController::class,'update'])->name('admin.category.update')->middleware(['auth','admin']);
Route::DELETE('/admin/categories/delete/{category}', [CategoryController::class, 'delete'])->name('admin.category.delete')->middleware(['auth','admin']);

so what we can do is we can group the routes with the group() method and assign a single Controller and multiple middlewares using the controller() and middleware() methods, respectively, like this:

Good:

Route::controller(ProfileController::class)->middleware(['auth','admin'])->group(function() {

  Route::get('/admin/categories/index', 'index')->name('admin.category.index');
  Route::get('/admin/categories/create','create')->name('admin.category.create');
  Route::POST('/admin/categories/index','store')->name('admin.category.store');
  Route::get('/admin/categories/edit/{category}', 'edit')->name('admin.category.edit');
  Route::PUT('/admin/categories/update/{category}','update')->name('admin.category.update');
  Route::DELETE('/admin/categories/delete/{category}', 'delete')->name('admin.category.delete');
  
});

3rd. Group routes by names and prefixes .

Now if you carefully see we are using the same url for the crud which is “/admin/products/” and the same thing is happening with the route names , we are defining admin.products and /admin/products again and again just like the above example so what we can do is we can use prefix and name method into the group like this:

 Route::controller(CategoryController::class)
  ->middleware(['auth','admin'])
  ->prefix('admin/categories')
  ->namespace('Backend') //if you have one more folder inside Controllers you can specify namespaces too
  ->name('admin.category.')->group(function() {

   Route::get('index', 'index')->name('index');
   Route::get('create','create')->name('create');
   Route::POST('index','store')->name('store');
   Route::get('edit/{product}', 'edit')->name('edit');
   Route::PUT('update/{category}','update')->name('update');
   Route::DELETE('delete/{category}', 'delete')->name('delete');

});

this is also equivalent to this:

Route::group([

    'middleware' => ['admin','auth'],
    //if you have one more folder inside Controllers you can specify namespaces too
    'namespace' => 'Backend', 
    'controller' => CategoryController::class,
    'prefix' => 'admin/categories',
    'as' => 'admin.category.',

],function() {

    Route::get('index', 'index')->name('index');
    Route::get('create','create')->name('create');
    Route::POST('index','store')->name('store');
    Route::get('edit/{category}', 'edit')->name('edit');
    Route::PUT('update/{category}','update')->name('update');
    Route::DELETE('delete/{category}', 'delete')->name('delete');
});

and is also equivalent to this too if you have separate file for routes (mentioned in first example) :

RouteServiceProvider.php

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

Route::middleware(['web','auth','admin']) //<------ your Middlewares array
    ->namespace($this->namespace . '\Backend') //<------ your Custom Namespace 
    ->prefix('admin/categories') //<-------- URL prefixes
    ->name('admin.category.') //<----------- your routes names 
    ->group(base_path('routes/admin.php')); //<-------- your routes file path

/routes/admin/admin.php

use Illuminate\Support\Facades\Route;

Route::controller(CategoryController::class)->group(function() {

    Route::get('index', 'index')->name('index');
    Route::get('create','create')->name('create');
    Route::POST('index','store')->name('store');
    Route::get('edit/{category}', 'edit')->name('edit');
    Route::PUT('update/{category}','update')->name('update');
    Route::DELETE('delete/{category}', 'delete')->name('delete');

});

You can see our routes looks much more sleeker now .

so if you want to organize your routes for Large/Small projects this is the best way .

Here are some key points of what we learned today :

1st. Organize Your Routes to separate folders

2nd. Use Middleware() and controller() method to share single controller and multiple middlewares to all the routes .

3rd: Use prefix() and name() method to share common url prefixes and route names to all the routes .

If you have read this far , I Really Appreciate Your Time . Thank you !

As you have seen in my previous Story, i have explained how to create dashboard for different roles, so in today’s article i am gonna show you how you can switch roles from seller to buyer or buyer to seller like Fiverr.

In order to make the switching dashboard work , we have to know what role is currently active of the Auth user for Eg:- if the user is logged in as a role seller his active role would be 2 and if the user is logged in as a buyer his active role should be 1 because here we will not be displaying contents according to the Auth user , we will be displaying contents according to the role .

Our Main Recipe of making this Feature is 2 things (Important):

1st : We will define an active_role field in the user’s table and we can check if the user active_role field is 2 that means he is seller else if its 1 he is a buyer .

2nd: So as we have defined buyer and seller gates in the previous story , we write a logic in such a way that , if the user active_role is 2 (seller ) he can access the seller gate and if its 1 (buyer) he can access the buyer gate .

That is the 2 main logic of entire feature now in order make this work we have to update the active role field by the click of a button, if he clicks on switch to seller his active role have to be updated from 1 to 2 .

Lets create a column called active_role on the users table , and lets add 1 by default which is the Buyer .

As according to our 2nd Recipe we have to access the seller and buyer gates according to the active_roles, now lets customize the gates that we made in the previous story .

Seller Gate:

We will first verify if the user has more than 0 roles. Next, we will determine if the user has an active role. If they do, we will check if the active role is 2 (seller) and If the user has more than one role, we will search for a role with an ID that matches the user’s active role field and return it. If we find one, we will return true. Otherwise, we will return the seller role.

This will let us access the seller gate if the active role is 2 .

Gate::define('Seller-only',function($user)
{
    
  if(count($user->roles) > 0){
     
      if($user->active_role){
          
          if($user->active_role == 2 && $user->roles->count() == 2){

              return ($user->roles()->where('role_id',$user->active_role)->first()->name == 'Seller');
          }
      
      }

      return ($user->roles->first()->name === 'Seller' );
  }

});

2. Buyer Gate:

We will do the same thing for the Buyer now .

Gate::define('Buyer-Only',function($user)
    {
      if(count($user->roles) > 0){
            
          
        if($user->active_role){
          
            if($user->active_role == 1 && $user->roles->count() == 2){

                return ($user->roles()->where('role_id',$user->active_role)->first()->name == 'Buyer');
            }
        
        }
        
          return ($user->roles->first()->name === 'Buyer');
      }

    });

3rd Seller-Admin-Buyer (To access the same page for all the roles as discussed in the previous story ) :

 Gate::define('Seller-Admin-Buyer',function($user)
  {

      if(count($user->roles) > 0){
       
          $userRole = $user->roles->first()->name;

          if($user->active_role){

              
              if($user->active_role == 2 && $user->roles->count() == 2){

             
                  return ($user->roles()->where('role_id',$user->active_role)->first()->name == 'Seller');
              }

              if($user->active_role == 1 && $user->roles->count() == 2){

                  
                  return ($user->roles()->where('role_id',$user->active_role)->first()->name == 'Buyer');
              }

          }
          
          return ($user->roles->first()->name === 'Seller' ) || ($user->roles->first()->name === 'Buyer' );

      }
      
      return ($user->is_admin === 777);
  });

Lets create a form , routes and function so that we can update active_role on a click of a button “Switch to Seller / Buyer ”

In Routes file :

Route::put('/change/role',[DashboardController::class,'changeRole'])->name('change-role');

In Navbar.blade.php View (form section):

So by clicking on the Switching button, active_role field of the user will be updated .

If the active_role of the user is 2 and if he wants to switch to buyer, we will send the active_role request as 1 in the controller and if he wants to “switch to seller” we will send the request as 2 which is seller and we will differentiate the values using gates like below .

<form action="{{route('change-role')}}" method="POST">
  @csrf
  @method('PUT')

  @can('Seller-only')
  <input type="hidden" value="1" name="role_type">
  <button type="submit" class="bg-emerald-200 w-full text-emerald-700 px-2 py-1 rounded font-medium">Switch to Buyer</button>
  

  @elsecan('Buyer-Only')
  <input type="hidden" value="2" name="role_type">
  <button type="submit" class="bg-blue-200 w-full text-blue-700 px-2 py-1 rounded font-medium">Switch to Seller</button>

  @endcan
</form>



//TO CHECK IF THE USER IS LOGGED IN AS A BUYER OR AS A SELLER (IMPORTANT)

  <h1 class="font-semibold mx-2"> Logged In As,</h1> {{Auth::user()->name}}
                
   @if (Auth::user()->active_role)
           
      @if (Auth::user()->active_role == 2)
      
      <h1 class="text-xs bg-blue-600  rounded px-1 py-0.5 w-fit text-blue-100">Seller</h1>
      @elseif(Auth::user()->active_role == 1)
      
          <h1 class="text-xs bg-emerald-600  rounded px-1 py-0.5 w-fit text-emerald-100"> Buyer </h1>
    @endif

    @else
  
      @if (Auth::user()->roles->first() && Auth::user()->roles->first()->name == 'Seller')
      
      <h1 class="text-xs bg-blue-600  rounded px-1 py-0.5 w-fit text-blue-100">{{Auth::user()->roles->first()->name}} </h1>

      @elseif(Auth::user()->roles->first() && Auth::user()->roles->first()->name == 'Buyer')
      <h1 class="text-xs bg-emerald-600  rounded px-1 py-0.5 w-fit text-emerald-100">{{ Auth::user()->roles->first()->name}} </h1>

          @endif

  @endif

In Dashboard Controller:

 public function changeRole(Request $request)
  {
      
      if($request->role_type == 1){
          
          $user = User::findOrFail(Auth::id());
          $user->active_role = 1;
          $user->save();

          return redirect()->route('admin-dashboard')->with('switch_role','Switched To Buyer');
      };

      $user = User::findOrFail(Auth::id());
      $user->active_role = 2;
      $user->save();

      return redirect()->route('admin-dashboard')->with('switch_role','Switched To Seller');

  }

Now lets preview this :

Currently i am logged in as a seller and i want to switch to buyer so my current gate which is active is ‘Seller-Only’ which means as the form mentioned above my request role_id will be sent to the controller will be 1 .

Now as i click on the switch to buyer my active_role field on the table will be updated to 1 (Buyer) and i will be able to access the Buyer gate .

I hope you enjoyed my article feel free to comment and leave suggestions or ideas …

Happy Coding !

Today we are gonna see how we can create different dashboards for different permissions of multiple users.

I won’t show you how to create relationships or do the migrations and installing the projects and stuffs … i will assume you have some intermediate knowledge of laravel , Relationships etc...

Pre-requisite: Intermediate Knowledge Of Laravel, Strong Knowledge Of DB Design & Management, Authorization and Authentication skills .

First of all we will install the Laravel Breeze Package and we will migrate all the default tables for the project setup.

Now the main concept is, a user can be a seller, buyer or both and there will be 1 admin , so each role can have mulitple users for eg:- a user can be a buyer and a seller too, so in this case we are going to use many to many relationships .

IMPORTANT: In Part 1 , we will only build Seller, Buyer and Admin Dashboard, the both role section will be in part 2 of the article where user can switch roles between buyer and seller ( both )

Schema::create('users', function (Blueprint $table) {
$table->increments('id');
    $table->string('name');
    $table->string('email')->unique();
    $table->timestamps();
});

Create Migration of Roles Table

Schema::create('roles', function (Blueprint $table) {
$table->increments('id');
    $table->string('name');
    $table->timestamps();
});

Lets create a pivot table called user_role and add the user_id and role_id in the pivot table .

Schema::create('role_users', function (Blueprint $table) {
$table->integer('user_id')->unsigned();
    $table->integer('role_id')->unsigned();
    $table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');
    $table->foreign('role_id')->references('id')->on('roles')->onDelete('cascade');
});

now attach the relationships in the User & Role model like this:

<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
class User extends Model
{
  
    public function roles()
    {
        return $this->belongsToMany(Role::class, 'role_users');
    }
}

Role Model:

<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
class Role extends Model
{    
    public function user()
    {
        return $this->belongsToMany(User::class, 'role_users');
    }
}

Now lets define some gates in Auth Service Provider of Admin , Seller , Buyer.

First we will create a Admin Gate where we will authorize if the user is admin or not we will pass the user as the parameter and we will check if the user->is_admin === 777 , now gates returns the results in true or false , so if the gate value is true , it will allow us to access the admin section .

Gate::define('SuperAdmin-only',function($user)
{
  return ($user->is_admin === 777); 

});

Now lets create a seller and buyer gates, first we will check if the user has any roles , if yes we will check if he is a buyer or seller and return true or false according to the conditions like this:

Gate::define('Seller-only',function($user)
{
  
  if(count($user->roles) > 0){
     
      return ($user->roles->first()->name === 'Seller' );
  }

});


Gate::define('Buyer-only',function($user)
{
  
  if(count($user->roles) > 0){
     
      return ($user->roles->first()->name === 'Buyer' );
  }

});

Now this is where the crazy part comes, now you wont create a page for every roles right ? that will be little messy !

So instead we will be creating only 1 page for every role and we will differentiate the sections using “@can” method in Laravel .

But how can we allow multiple users with different roles or permissions to access the same page for eg: dashboard, well you can use the or method in your gates to combine multiple conditions like this :

Gate::define('Seller-only',function($user)
{
  
  if(count($user->roles) > 0){
     
      return ($user->roles->first()->name === 'Seller' ) || return ($user->roles->first()->name === 'Buyer );
  }

  return ($user->is_admin === 777);

});

Now lets create route for dashboard, now if you noticed here we have added the gate Seller-Admin-Buyer middleware: this will allow mulitple users with different roles to access the same page . So seller, admin and buyer can access the same dashboard page and later on we can differentiate the dashboard sections with the can method later .

Route::group(['middleware' => ['auth','can:Seller-Admin-Buyer']], function (){

    Route::get('/dashboard',[DashboardController::class,'dashboard'])->name('dashboard');

});

Now lets customize the view of the dashboard :

dashboard.blade.php

@if (Auth::user()->roles->first())

  Welcome To {{Auth::user()->roles->first()->name}} Dashboard, {{Auth::user()->name}}

@endif

@if (Auth::user()->is_admin === 777)
   Welcome To ADMIN Dashboard, {{Auth::user()->name}}
@endif

Now lets create 2 roles for seller and buyer on roles table like this :

and also register 2 new users and attach the role id of 1 and 2 in the users_roles pivot table like this:

Now this is what welcome dashboard will look like for buyers :

Now lets login as 2nd user who is seller and attach a role id of 2 in the users_roles pivot table as we did in the previous part, his welcome dashboard will look this this :

Now login as an admin whose is_admin value is 777 on the users table , his dashboard will look like this :

Now lets create sidebar links with “@can” method to separate links of each roles . seller will have features to manage orders , sell products, create coupons etc…

The Can method starts with “@can + {the gate name} ”

Here we are using can method with Seller gate, which means only seller will have access to this particular section links !

@can('Seller-only') //we will use can 
   
  <a class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-300 transform rounded-md dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="{{route('my-product')}}">

       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="w-5 h-5 bi bi-bag-check" viewBox="0 0 16 16">
         <path fill-rule="evenodd" d="M10.854 8.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
          <path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z"/>
        </svg>
      <span class="mx-4 font-medium">
          Sell Products
      </span>
   </a>

  <a class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-300 transform rounded-md dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="{{route('my-product')}}">

      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="w-5 h-5 bi bi-bag-check" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M10.854 8.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
         <path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z"/>
       </svg>
     <span class="mx-4 font-medium">
         Create Coupons
     </span>
  </a>

  <a class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-300 transform rounded-md dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="{{route('my-product')}}">

      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="w-5 h-5 bi bi-bag-check" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M10.854 8.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
         <path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z"/>
       </svg>
     <span class="mx-4 font-medium">
         Manage Orders
     </span>
  </a>
@endcan

Now lets create links for buyers as well, we are giving permissions to buyers that they can buy the products, view their order history , track order etc…

@can('Buyer-Only')
       
  <a class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-300 transform rounded-md dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="{{route('my-product')}}">

       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="w-5 h-5 bi bi-bag-check" viewBox="0 0 16 16">
         <path fill-rule="evenodd" d="M10.854 8.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
          <path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z"/>
        </svg>
      <span class="mx-4 font-medium">
          Buy Products
      </span>
   </a>

  <a class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-300 transform rounded-md dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="{{route('my-product')}}">

      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="w-5 h-5 bi bi-bag-check" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M10.854 8.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
         <path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z"/>
       </svg>
     <span class="mx-4 font-medium">
         My Orders History
     </span>
  </a>

  <a class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-300 transform rounded-md dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="{{route('my-product')}}">

      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="w-5 h-5 bi bi-bag-check" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M10.854 8.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
         <path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z"/>
       </svg>
     <span class="mx-4 font-medium">
         Track Order
     </span>
  </a>
@endcan

This is what Buyer and Seller dashboard sidebar will look like finally:

Seller Dashboard:

Buyer Dashboard:

Now just like that you can create routes for sellers and buyer like this and differentiate them with “can ” and “cannot ” methods in Laravel and add it to your customization's and your personal preferences .

Route::group(['middleware' => ['auth','can:Seller-only']], function (){

   Route::get('/seller/manage-orders', [OrderController::class, 'manageOrders'])->name('manage.orders');
   
   ...more seller routes

   // only sellers can access this pages
});

Route::group(['middleware' => ['auth','can:Buyer-only']], function (){

  Route::get('/buy/products', [ProductController::class, 'buyProduct'])->name('buy.product');

});

I hope you enjoyed this articles , Happy Coding !

Next Article : Switch Roles between Seller And Buyer (Both) like fiverr …