Build Free Pro Website with me! EP#2

5 min readSep 10, 2021

What are we going to cover this round?

This episode mainly focuses on the “Admin-Facing” functionality. If you missed the last episode, you need to read through and complete your Backpack setup.

Laravel Backpack provides extensive FREE useful packages for you to build your web application fast! When you finish this tutorial, these functionalities will be added. Have fun!

✴️ Admin Roles & Permission
✴️ Users Management
✴️ Pages Management
✴️ Post Publication

🌐 Admin Management

We’re going to install the Permission Manager to manage the Admin’s Roles & Permissions.

1. Install via Composer

sail composer require backpack/permissionmanager

2. Publish the necessary migrations of spatie/laravel-permission

sail artisan vendor:publish --provider="Spatie\Permission\PermissionServiceProvider" --tag="migrations"

3. Run the migration

sail artisan migrate

4. Publish the config of Spatie Permissions packages

sail artisan vendor:publish --provider="Spatie\Permission\PermissionServiceProvider" --tag="config"

5. Publish the config for the backpack/permission manager

sail artisan vendor:publish --provider="Backpack\PermissionManager\PermissionManagerServiceProvider" --tag="config"

We need to modify the Model and Multi-Guards options…

/config/backpack/permissionmanager.php

6. Add traits in the Admin Model

CrudTrait and HasRoles traits (line 14) are required for permission manager.

/app/Models/Admin.php

7. Copy CRUD controller

The Permission Manager comes with the CRUD Controller, but it is using \user as the route, so we need to copy and modify it.

Copy the file:

cp vendor/backpack/permissionmanager/src/app/Http/Controllers/UserCrudController.php app/Http/Controllers/Admin/AdminCrudController.php

Alternatively, you can create the file app/Http/Controllers/Admin/AdminCrudController.php with the content below:

/app/Http/Controllers/Admin/AdminCrudController.php

It is lengthy, but I just changed the namespace(line 3), class(line 10) name and the setRoute()(line 21).

8. Register routes

Then we need to bind the route with the CRUD controller above.

Add the line in /routes/backpack/custom.php

Route::crud('admin', 'AdminCrudController');

The final result:

/routes/backpack/custom.php

9. Add menu items

Finally, add the menu links on the sidebar menu.

/resources/views/vendor/backpack/base/inc/sidebar_content.blade.php

10. Update the terms

You should notice it use “Users” in the Permission Manager, but you can change it easily by modifying the language file.

Create the file resources/lang/vendor/backpack/en/permissionmanager.php with the content below:

/resources/lang/vendor/backpack/en/permissionmanager.php

The result will be like this:

We will not cover how to utilize the Role & Permission for now. We will come back in the future episode for controlling which roles/permissions can access which part of the Admin Panel.

🌐 Users Management

Since we’re able to manage Admins, then we can also build a user management using the core functionality of Laravel Backpack.

💡 Reference: Crash Course from the Laravel Backpack Official Documentation

In this round, we will only briefly touch the CRUD by referencing existing Admin CRUD.

The migration, model of the User model was created previously. Run this command to generate other components:

sail artisan backpack:crud user

You should see three files is modified (yellow icon), and two files added (green icon)

screenshot from SourceTree after executing the command

✏️ Model — User.php
CrudTrait is added, make it become a CRUD-capable entity.
✏️ Menu — sidebar_content.blade.phpThe “Users” menu item is added, you can change the icon (la-question).
✏️ Route — custom.php
The CRUD resource routes are added for all related requests, but we need to override the route in the Permission Manager. So you need to remove the line below in the custom.php:

Route::crud('user', 'UserCrudController'); <<--- Remove this

✏️ Route — web.phpJust copy the lines from line 26, we put it here (web.php) due to the order of route files loading. This will override the Permission Manager route(s) for /admin/user. This should be the easiest way for beginners.

/routes/web.php

➕ Store Request Validation — UserStoreCrudRequest.php
We need to separate the UserRequest.php due to different validation rules for store/update. So, you need to delete UserRequest.php and create UserStoreCrudRequest.php.

/app/Http/Requests/UserStoreCrudRequest.php

➕ Update Request Validation — UserUpdateCrudRequest.php
We need to separate the UserRequest.php due to different validation rules for store/update. So, you need to delete UserRequest.php and create UserUpdateCrudRequest.php. For “update”, the email is unique except for the original email address of the user. You can read the Laravel Office Docs for more details.

/app/Http/Requests/UserUpdateCrudRequest.php

➕ Controller— UserCrudController.php
Now, the route /admin/user is pointing toUserCrudController.php. I refer to the file app/Http/Controllers/Admin/AdminCrudController.php and here is the end result you can take away…

/app/Http/Controllers/Admin/UserCrudController.php

Finally, these are the files modified/added:

screenshot from SourceTree after complete User CRUD

🎉 Done! You can test the User CRUD in your Admin panel now!

🌐 Page Management

You will soon own a homepage, but you definitely do not want to open your VS Code to edit your page content for updating the content. This is what CMS (Content Management System) comes into the scene, a well-known example you might hear before — WordPress.

1. Create Sample Page Template (app/PageTemplates.php)
This is the sample page template, we will add more pages in the future.

/app/PageTemplates.php

2. Install via Composer

sail composer require backpack/pagemanager

3. Publish vendor files

sail artisan vendor:publish --provider="Backpack\PageManager\PageManagerServiceProvider"

4. Run migrations

sail artisan migrate

5. Add Sidebar Menu item (resources/views/vendor/backpack/base/inc/sidebar_content.blade.php)

Paste the “Page” menu item with the menu order you want.

<li class='nav-item'><a class='nav-link' href='{{ backpack_url('page') }}'><i class='nav-icon la la-file-o'></i> <span>Pages</span></a></li>

That’s it! We are not going to cover the frontend portion for now.

🌐 Post Publication

You can now manage your website pages, so you would like to have a blog post section to connect your audiences.

1. Install via Composer

sail composer require backpack/newscrud

2. Publish vendor files

sail artisan vendor:publish --provider="Backpack\NewsCRUD\NewsCRUDServiceProvider"

3. Run migrations

sail artisan migrate

4. Add Sidebar Menu item

Same as what all CRUDs you have done, you need to add the menu items to your sidebar (line 4 to line 11).

This is the final sidebar.blade.php for this episode.