---
description: >-
  https://www.itsolutionstuff.com/post/laravel-8-crud-application-tutorial-for-beginnersexample.html
---

# Cách lấy chỉ số để phân trang pagination, pagination in view, pagination in Controller (ok)

```php
public function index()
    {
        $products = Product::latest()->paginate(5);
    
        return view('products.index',compact('products'))
            ->with('i', (request()->input('page', 1) - 1) * 5);
    }
```

Hoặc có thểm xem thêm [bài viết](https://ksharing.info/laravel-8-user-roles-permissions-and-product-crud-with-images/) có bài viết ở dưới

{% file src="https://1957079826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCBeDUD-PK_RF-YgJRe%2Fuploads%2FLvXUlaTQLltSsTX6Bknx%2Flaravel-8-CRUD-with-images-main.zip?alt=media&token=2c30ab93-40d2-4900-830a-04465ce02861" %}

```php
 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);
}
```

## Laravel 8 CRUD Application Tutorial for Beginners

By Hardik Savani September 9, 2020 Category : LaravelPowered By[![VDO.AI](https://a.vdo.ai/core/assets/img/logo.svg)](https://vdo.ai/contact?utm_medium=video\&utm_term=itsolutionstuff.com\&utm_source=vdoai_logo)PauseUnmuteLoaded: 1.84%FullscreenIn this tutorial, i would like to show you laravel 8 crud operation example. we will implement a laravel 8 crud application for beginners. i will give you simple example of how to create crud in laravel 8. you will learn crud operation in laravel 8.

So, let's follow few step to create example of laravel 8 crud application tutorial.

Laravel 8 is just released by yesterday, Laravel 8 gives several new features and LTS support. So if you are new to laravel then this tutorial will help you create insert update delete application in laravel 8.

You just need to follow few step and you will get basic crud stuff using controller, model, route, bootstrap 4 and blade..

In this tutorial, you will learn very basic crud operation with laravel new version 6. I am going to show you step by step from scratch so, i will better to understand if you are new in laravel.

![](https://www.itsolutionstuff.com/upload/laravek-8-crud.png?ezimgfmt=ng%3Awebp%2Fngcb5%2Frs%3Adevice%2Frscb5-1)

**Step 1 : Install Laravel 8**

first of all we need to get fresh Laravel 8 version application using bellow command, So open your terminal OR command prompt and run bellow command:

```
composer create-project --prefer-dist laravel/laravel blog
```

**Step 2: Database Configuration**

In second step, we will make database configuration for example database name, username, password etc for our crud application of laravel 8. So let's open .env file and fill all details like as bellow:

.env

```
DB_CONNECTION=mysqlDB_HOST=127.0.0.1DB_PORT=3306DB_DATABASE=here your database name(blog)DB_USERNAME=here database username(root)DB_PASSWORD=here database password(root)
```

Read Also: [What's New in Laravel 8 | Laravel 8 New Features](https://www.itsolutionstuff.com/post/whats-new-in-laravel-8-laravel-8-new-featuresexample.html)

**Step 3: Create Migration**

we are going to create crud application for product. so we have to create migration for "products" table using Laravel 8 php artisan command, so first fire bellow command:

```
php artisan make:migration create_products_table --create=products
```

After this command you will find one file in following path "database/migrations" and you have to put bellow code in your migration file for create products table.

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

Now you have to run this migration by following command:

```
php artisan migrate
```

**Step 4: Add Resource Route**

Here, we need to add resource route for product crud application. so open your "routes/web.php" file and add following route.

routes/web.php

```
use App\Http\Controllers\ProductController;  Route::resource('products', ProductController::class);
```

**Step 5: Add Controller and Model**

In this step, now we should create new controller as ProductController. So run bellow command and create new controller. bellow controller for create resource controller.

```
php artisan make:controller ProductController --resource --model=Product
```

After bellow command you will find new file in this path "app/Http/Controllers/ProductController.php".

In this controller will create seven methods by default as bellow methods:

1\)index()

2\)create()

3\)store()

4\)show()

5\)edit()

6\)update()

7\)destroy()

So, let's copy bellow code and put on ProductController.php file.

app/Http/Controllers/ProductController.php

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

Ok, so after run bellow command you will find "app/Models/Product.php" and put bellow content in Product.php 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 Blade Files**

In last step. In this step we have to create just blade files. So mainly we have to create layout file and then create new folder "products" then create blade files of crud app. So finally you have to create following bellow blade file:

1\) layout.blade.php

2\) index.blade.php

3\) create.blade.php

4\) edit.blade.php

5\) show.blade.php

So let's just create following file and put bellow code.

resources/views/products/layout.blade.php

```
<!DOCTYPE html><html><head>    <title>Laravel 8 CRUD Application - ItSolutionStuff.com</title>    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"></head><body>  <div class="container">    @yield('content')</div>   </body></html>
```

resources/views/products/index.blade.php

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

resources/views/products/create.blade.php

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

resources/views/products/edit.blade.php

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

resources/views/products/show.blade.php

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

Now we are ready to run our crud application example with laravel 8 so run bellow command for quick run:

```
php artisan serve
```

Now you can open bellow URL on your browser:

Read Also: [Laravel 8 Livewire CRUD with Jetstream & Tailwind CSS](https://www.itsolutionstuff.com/post/laravel-8-livewire-crud-with-jetstream-tailwind-cssexample.html)

```
http://localhost:8000/products
```

You will see layout as like bellow:

List Page:

![](https://www.itsolutionstuff.com/upload/laravel-8-crud-index.png?ezimgfmt=rs:1185x552/rscb5/ng:webp/ngcb5)

Add Page:

![](https://www.itsolutionstuff.com/upload/laravel-crud-add.png?ezimgfmt=rs:1185x510/rscb5/ng:webp/ngcb5)

Edit Page:

![](https://www.itsolutionstuff.com/upload/laravel-crud-edit.png?ezimgfmt=rs:1185x510/rscb5/ng:webp/ngcb5)

You can download code from git: [Download Code from Github](https://github.com/savanihd/Laravel-8-CRUD)

I hope it can help you....

Tags :

* [CRUD](https://www.itsolutionstuff.com/tag/crud.html)
* [Laravel](https://www.itsolutionstuff.com/tag/laravel.html)
* [Laravel 8](https://www.itsolutionstuff.com/tag/laravel-8.html)

![](https://www.itsolutionstuff.com/assets/images/hardik-savani.png?ezimgfmt=rs:113x113/rscb5/ng:webp/ngcb5)

#### Hardik Savani

I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Laravel, Angular, Vue, Node, Javascript, JQuery, Codeigniter and Bootstrap from the early stage. I believe in Hardworking and Consistency.

#### Laravel 8 User Roles & Permissions and Product CRUD With Images Tutorial

_CRUD_ is an acronym that comes from the world of computer programming and refers to the four functions that are considered necessary to implement a persistent storage application: _**create, read, update**_ and _**delete**_.

User management is important feature in any web application. A user should have access to the permissions that only required. That way, user can only see the menus that assigned to its role.

In this article, we are using spatie github package for roles and permissions in laravel 8 application. just follow bellow step to create acl in laravel 8.

Spatie role permission composer package provide way to create acl in [laravel ](https://ksharing.info/category/laravel-framework/)8. they provide how to assign role to user, how to assign permission to user and how to assign permission assign to roles. i will write step by step creating roles and permissions in laravel 8 application.

### Step 1: Create Laravel application <a href="#h-step-1-create-laravel-application" id="h-step-1-create-laravel-application"></a>

we need to create a new laravel application. for that open your terminal or command prompt and create a new Laravel application.

```
composer create-project laravel/laravel mynewapp
```

And than go to project directory

```
cd mynewapp
```

### Step 2: Install require composer package <a href="#h-step-2-install-require-composer-package" id="h-step-2-install-require-composer-package"></a>

Now we nedd to install require Spatie package for ACL (Access Control List). Open your terminal and execute bellow command.

```
composer require spatie/laravel-permission
composer require laravelcollective/html
```

Now we need to register provider class to config/app.php file so open file and add service provider.

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

If we want to change on Spatie package then we need to run bellow command that will generate config/permission.php and migration files

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

### Step 3: Configure database connection <a href="#h-step-3-configure-database-connection" id="h-step-3-configure-database-connection"></a>

go to .env file and confiure database connection type, db host, db port, db database, db username, db password

```
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_usercontrol
DB_USERNAME=root
DB_PASSWORD=
```

now we can run migrate command

```
php artisan migrate
```

### Step 4: Create product migration <a href="#h-step-4-create-product-migration" id="h-step-4-create-product-migration"></a>

we need to create product table for migration as using bellow command. This will generate CreateProductsTable class at database>migrations

```
php artisan make:migration create_products_table
```

**products table:**

```
<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateProductsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('products', function (Blueprint $table) {
            $table->id();
            $table->string('name');            
            $table->text('detail');            
            $table->string('image');
            $table->decimal('price', 8, 2);
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('products');
    }
}
```

### Step 5: Create model <a href="#h-step-5-create-model" id="h-step-5-create-model"></a>

In this step, we we will create a product model to get data from product table. Run the below artisan command to generate product model. That will generate Product model at app>Models

```
 php artisan make:model Product
```

add fillable attribute in Product model

```
<?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', 'image', 'price'
    ];
}
```

Laravel have already User model. We just need to add HasRoles trait in it. So open User model and add it.

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

    /**
     * The attributes that should be cast.
     *
     * @var array<string, string>
     */
    protected $casts = [
        'email_verified_at' => 'datetime',
    ];
}
```

### Step 6: Register middlewares package <a href="#h-step-6-register-middlewares-package" id="h-step-6-register-middlewares-package"></a>

The package will handle roles and permission middlewares. We can add them inside app/Http/Kernel.php file.

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

### Step 7: Create authentication scaffold <a href="#h-step-7-create-authentication-scaffold" id="h-step-7-create-authentication-scaffold"></a>

Now we need to implement Laravel default authentication feature. So run the following command in Terminal.

```
composer require laravel/ui
```

We need views for login and register. We can do it with following command. This will generate view file for login and register.

```
php artisan ui bootstrap --auth
```

<figure><img src="https://i0.wp.com/ksharing.info/wp-content/uploads/2022/01/laravel-8-user-roles-perm.jpg?resize=577%2C325&#x26;ssl=1" alt="user roles &#x26; permissions"><figcaption></figcaption></figure>

Now we also need to compile view assets for authentication view. So run the below npm command.

**Note:** The below npm commands only require for asset compiling, if you are adding your own view, then you don’t need to run npm commands.

```
npm install
npm run dev
```

### Step 8: Create controllers <a href="#h-step-8-create-controllers" id="h-step-8-create-controllers"></a>

We are going to build CRUD part for users, roles and product table, so we need resource controllers for them. Run below commands one by one to create controllers.

```
php artisan make:controller UserController --resource
php artisan make:controller RoleController --resource
php artisan make:controller ProductController --resource
```

**app/Http/Controllers/UserController.php**

```
<?php
 namespace App\Http\Controllers; 

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Models\User;
use Spatie\Permission\Models\Role;
use DB;
use Hash;
use Illuminate\Support\Arr;
    

class UserController extends Controller

{
    function __construct()
    {
        // set permission
         $this->middleware('permission:user-list|user-create|user-edit|user-delete', ['only' => ['index','show']]);
         $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.
     *
     * @return \Illuminate\Http\Response
     */

    public function index(Request $request)
    {
        $data = User::orderBy('id','DESC')->paginate(5);        
        return view('users.index',compact('data'))->with('i', ($request->input('page', 1) - 1) * 5);
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */

    public function create()
    {
        $roles = Role::pluck('name','name')->all();
        return view('users.create',compact('roles'));
    }
     /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */

    public function store(Request $request)
    {
        $this->validate($request, [
            'name' => 'required',
            'email' => 'required|email|unique:users,email',
            'password' => 'required|same:confirm-password',
            'roles' => 'required'
        ]);   

        $input = $request->all();
        $input['password'] = Hash::make($input['password']);    

        $user = User::create($input);
        $user->assignRole($request->input('roles'));    

        return redirect()->route('users.index')->with('success','User created successfully');
    }    

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */

    public function show($id)
    {
        $user = User::find($id);
        return view('users.show',compact('user'));
    }    

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        $user = User::find($id);
        $roles = Role::pluck('name','name')->all();
        $userRole = $user->roles->pluck('name','name')->all();    

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

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        $this->validate($request, [
            'name' => 'required',
            'email' => 'required|email|unique:users,email,'.$id,
            'password' => 'same:confirm-password',
            'roles' => 'required'
        ]);
    

        $input = $request->all();
        if(!empty($input['password'])){ 
            $input['password'] = Hash::make($input['password']);
        }else{
            $input = Arr::except($input,array('password'));
        }

        $user = User::find($id);
        $user->update($input);
        DB::table('model_has_roles')->where('model_id',$id)->delete();
        $user->assignRole($request->input('roles'));

        return redirect()->route('users.index')->with('success','User updated successfully');

    } 

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        User::find($id)->delete();
        return redirect()->route('users.index')->with('success','User deleted successfully');
    }

}
```

**app/Http/Controllers/RoleController.php**

```
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Spatie\Permission\Models\Role;
use Spatie\Permission\Models\Permission;
use DB;    

class RoleController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    function __construct()
    {
         $this->middleware('permission:role-list|role-create|role-edit|role-delete', ['only' => ['index','store']]);
         $this->middleware('permission:role-create', ['only' => ['create','store']]);
         $this->middleware('permission:role-edit', ['only' => ['edit','update']]);
         $this->middleware('permission:role-delete', ['only' => ['destroy']]);
    }
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index(Request $request)
    {
        $roles = Role::orderBy('id','DESC')->paginate(5);
        return view('roles.index',compact('roles'))->with('i', ($request->input('page', 1) - 1) * 5);
    }   

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        $permission = Permission::get();
        return view('roles.create',compact('permission'));
    }   

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $this->validate($request, [
            'name' => 'required|unique:roles,name',
            'permission' => 'required',
        ]);

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

        return redirect()->route('roles.index')->with('success','Role created successfully');
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        $role = Role::find($id);
        $rolePermissions = Permission::join("role_has_permissions","role_has_permissions.permission_id","=","permissions.id")
        ->where("role_has_permissions.role_id",$id)->get();    

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

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        $role = Role::find($id);
        $permission = Permission::get();
        $rolePermissions = DB::table("role_has_permissions")->where("role_has_permissions.role_id",$id)
            ->pluck('role_has_permissions.permission_id','role_has_permissions.permission_id')
            ->all(); 

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

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        $this->validate($request, [
            'name' => 'required',
            'permission' => 'required',
        ]);
    
        $role = Role::find($id);
        $role->name = $request->input('name');
        $role->save();
        $role->syncPermissions($request->input('permission'));   

        return redirect()->route('roles.index')->with('success','Role updated successfully');
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        DB::table("roles")->where('id',$id)->delete();
        return redirect()->route('roles.index')->with('success','Role deleted successfully');
    }

}
```

**app/Http/Controllers/ProductController.php**

```
<?php 
namespace App\Http\Controllers;  

use App\Models\Product;
use Illuminate\Http\Request;
    

class ProductController extends Controller
{ 
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    function __construct()
    {
        // set permission
         $this->middleware('permission:product-list|product-create|product-edit|product-delete', ['only' => ['index','show']]);
         $this->middleware('permission:product-create', ['only' => ['create','store']]);
         $this->middleware('permission:product-edit', ['only' => ['edit','update']]);
         $this->middleware('permission:product-delete', ['only' => ['destroy']]);
    }

    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */

    public function index()
    {
        $products = Product::latest()->paginate(5);
        return view('products.index',compact('products'))->with('i', (request()->input('page', 1) - 1) * 5);
    }   

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    
    public function create()
    {
        return view('products.create');
    }
   
    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {

        $request->validate([
            'name' => 'required',
            'detail' => 'required',
            'price'=>'required',
            'image' => 'required|image|mimes:jpg,png,jpeg,gif,svg|max:2048',
            
        ]); 

        $input = $request->all();  

        if ($image = $request->file('image')) {
            $destinationPath = 'image/';
            $productImage = date('YmdHis') . "." . $image->getClientOriginalExtension();
            $image->move($destinationPath, $productImage);
            $input['image'] = "$productImage";
        } 

        Product::create($input);        

        return redirect()->route('products.index')->with('success','Product created successfully.');
    }   

    /**
     * Display the specified resource.
     *
     * @param  \App\Product  $product
     * @return \Illuminate\Http\Response
     */

    public function show(Product $product)
    {
        return view('products.show',compact('product'));
    }
    /**
     * Show the form for editing the specified resource.
     *
     * @param  \App\Product  $product
     * @return \Illuminate\Http\Response
     */

    public function edit(Product $product)
    {
        return view('products.edit',compact('product'));
    }  

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\Product  $product
     * @return \Illuminate\Http\Response
     */

    public function update(Request $request, Product $product)
    {
        $request->validate([
            'name' => 'required',
            'detail' => 'required',
            'price'=>'required',
        ]);

        $input = $request->all();  

        if ($image = $request->file('image')) {
            $destinationPath = 'image/';
            $productImage = date('YmdHis') . "." . $image->getClientOriginalExtension();
            $image->move($destinationPath, $productImage);
            $input['image'] = "$productImage";
        }else{
            unset($input['image']);
        }          

        $product->update($input);
   

        return redirect()->route('products.index')->with('success','Product updated successfully');
    }   

    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\Product  $product
     * @return \Illuminate\Http\Response
     */
    public function destroy(Product $product)
    {
        $ImagePath = 'image/'.$product->image;
        unset($ImagePath);
        $product->delete();
        return redirect()->route('products.index')->with('success','Product deleted successfully');
    }
  
}
```

### Step 9: Create routes <a href="#h-step-9-create-routes" id="h-step-9-create-routes"></a>

We have created all of controllers. Now we need to create routes for them, open routes/web.php and add new routes in it.

```
<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\HomeController;
use App\Http\Controllers\RoleController;
use App\Http\Controllers\UserController;
use App\Http\Controllers\ProductController;

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

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


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

Route::group(['middleware' => ['auth']], function() {
    Route::resource('roles', RoleController::class);
    Route::resource('users', UserController::class);
    Route::resource('products', ProductController::class);
});
```

### Step 10: Create view files <a href="#h-step-10-create-view-files" id="h-step-10-create-view-files"></a>

In this is step, we are going to create a blade view files. We will use one common layout and extend it to all views. Here is the list of all views that we will create in `resources/views/` directory. You can go to all folder and copy each view to your local file. we need to create following files

```
home.blade.php
layouts/
    app.blade.php
users/
    index.blade.php
    show.blade.php
    create.blade.php
    edit.blade.php
roles/
    index.blade.php
    show.blade.php
    create.blade.php
    edit.blade.php
products/
    index.blade.php
    show.blade.php
    create.blade.php
    edit.blade.php
```

Let’s start from common layout file. It is already there, you just slightly need to change in it and add route link in navigation bar.

**resources/views/layouts/app.blade.php**

```
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>{{ config('app.name') }}</title>

    <!-- Bootstrap core CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <script src="{{ asset('js/app.js') }}" defer></script>

    <!-- Custom styles for this template -->
    <link href="navbar-static-top.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
<body>
    <!-- Static navbar -->
    <nav class="navbar navbar-default navbar-static-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="{{ url('/') }}">Laravel 8 User Roles & Permissions and Product CRUD With Images Tutorial</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="{{ url('/') }}">Home</a></li>

          </ul>
          
          <ul class="nav navbar-nav navbar-right">

                       <!-- Authentication Links -->
                       @guest
                            <li><a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a></li>
                            <li><a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a></li>
                        @else
                            <li><a class="nav-link" href="{{ route('users.index') }}">Manage Users</a></li>
                            <li><a class="nav-link" href="{{ route('roles.index') }}">Manage Role</a></li>
                            <li><a class="nav-link" href="{{ route('products.index') }}">Manage Product</a></li>
                            <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ Auth::user()->name }}<span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                  <li><a href="{{ route('users.show', Auth::id()) }}">Profile</a></li>
                                  <li>
                                    <a href="{{ route('logout') }}"
                                      onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                                    
                                      {{ __('Logout') }}                                
                                    </a>
                                    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                                        @csrf
                                    </form>
                                  </li>                                
                                </ul>                            
                              </li>                            
                        @endguest

          </ul>
          
        </div><!--/.nav-collapse -->
      </div>
    </nav>


    <div class="container">
            @yield('content')          
        
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    

</body>
</html>
```

**resources/views/home.blade.php**

```
@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('Dashboard') }}</div>

                <div class="card-body">
                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif

                    {{ __('You are logged in!') }}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
```

<figure><img src="https://i0.wp.com/ksharing.info/wp-content/uploads/2022/01/user-role-Permissions.jpg?resize=640%2C360&#x26;ssl=1" alt="User roles &#x26; permissions"><figcaption><p><strong>User roles &#x26; permissions</strong></p></figcaption></figure>

complete users view balde file form [https://github.com/robin-bd/laravel-8-CRUD-with-images/tree/main/resources/views/users](https://github.com/robin-bd/laravel-8-CRUD-with-images/tree/main/resources/views/users)

complete roles view balde file form [https://github.com/robin-bd/laravel-8-CRUD-with-images/tree/main/resources/views/roles](https://github.com/robin-bd/laravel-8-CRUD-with-images/tree/main/resources/views/roles)

<figure><img src="https://i0.wp.com/ksharing.info/wp-content/uploads/2022/01/product.jpg?resize=640%2C256&#x26;ssl=1" alt="Laravel CRUD"><figcaption><p><strong>Product CRUD</strong></p></figcaption></figure>

complete products view balde file form [https://github.com/robin-bd/laravel-8-CRUD-with-images/tree/main/resources/views/products](https://github.com/robin-bd/laravel-8-CRUD-with-images/tree/main/resources/views/products)

### Step 11: Create Seeder <a href="#h-step-11-create-seeder" id="h-step-11-create-seeder"></a>

In this step we will create seeder for permissions, Right now we have fixed permission so we create using seeder as listed bellow, but if you can add more permission as you want:

```
php artisan make:seeder PermissionTableSeeder
```

And put bellow code in PermissionTableSeeder seeder this way:

**database/seeds/PermissionTableSeeder.php**

```
<?php

namespace Database\Seeders;

use Illuminate\Database\Seeder;
use Spatie\Permission\Models\Permission;

class PermissionTableSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()

    {
        $permissions = [
           'role-list',
           'role-create',
           'role-edit',
           'role-delete',
           'product-list',
           'product-create',
           'product-edit',
           'product-delete',
           'user-list',
           'user-create',
           'user-edit',
           'user-delete',
        ];     

        foreach ($permissions as $permission) {
             Permission::create(['name' => $permission]);
        }

    }

}
```

```
php artisan make:seeder CreateAdminUserSeeder
```

**database/seeds/CreateAdminUserSeeder.php**

```
<?php
namespace Database\Seeders;
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.
     *
     * @return void
     */
    public function run()
    {
        $user = User::create([
            'name' => 'Noor E Alam', 
            'email' => 'admin@email.com',
            'password' => bcrypt('123456')
        ]);    

        $role = Role::create(['name' => 'Admin']);   

        $permissions = Permission::pluck('id','id')->all();   

        $role->syncPermissions($permissions);    

        $user->assignRole([$role->id]);
    }
}
```

update DatabaseSeeder class at

**database/seeds/CreateAdminUserSeeder.php**

```
<?php

namespace Database\Seeders;

use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    /**
     * Seed the application's database.
     *
     * @return void
     */
    public function run()
    {
        // call others seeder class
        $this->call([
            PermissionTableSeeder::class,
            CreateAdminUserSeeder::class,
        ]);
    }
}
```

run bellow code for database table migrate, seeding and run application server.

```
php artisan migrate
php artisan db:seed
php artisan serve
```

default email and password for admin access

```
email: admin@email.com
password: 123456
```

This full application are available on github. you can download it and run it. [https://github.com/robin-bd/laravel-8-CRUD-with-images](https://github.com/robin-bd/laravel-8-CRUD-with-images)
