Laravel Backpack must be installed
- Laravel 7
- PHP 7.4
- GD or Imagick for Image Intervention
Run composer require clevyr/backpack-page-builder
This will install the Page Builder and the https://github.com/Laravel-Backpack/PermissionManager package
This will install Image Intervention http://image.intervention.io/getting_started/introduction
To install the Page builder run the following command, this will install the Permissions Manager and the Page Builder
Run php artisan pagebuilder:install
Update the config -> backpack -> base.php file
'guard' => 'backback',to
'guard' => config('auth.defaults.guard'),Run composer dump-autoload
Seed the permissions
Run php artisan db:seed --class=PageBuilderSeeder
Update resources -> views -> vendor -> backpack -> base -> inc -> sidebar_content.blade.php file with
@canany(['View User List', 'View Role List', 'View Permission List'])
<li class="nav-item nav-dropdown">
<a class="nav-link nav-dropdown-toggle" href="#"><i class="nav-icon la la-users"></i> Authentication</a>
<ul class="nav-dropdown-items">
@can('View User List')
<li class="nav-item"><a class="nav-link" href="{{ backpack_url('user') }}"><i class="nav-icon la la-user"></i> <span>Users</span></a></li>
@endcan
@can('View Role List')
<li class="nav-item"><a class="nav-link" href="{{ backpack_url('role') }}"><i class="nav-icon la la-id-badge"></i> <span>Roles</span></a></li>
@endcan
@can('View Permission List')
<li class="nav-item"><a class="nav-link" href="{{ backpack_url('permission') }}"><i class="nav-icon la la-key"></i> <span>Permissions</span></a></li>
@endcan
</ul>
</li>
@endcanany
@can('View Page List')
<li class="nav-item nav-dropdown">
<a class="nav-link nav-dropdown-toggle" href="#">
<i class="nav-icon la la-folder"></i>
Pages
</a>
<ul class="nav-dropdown-items">
<li class="nav-item">
<a class="nav-link" href="{{ backpack_url('pages') }}">
<i class="nav-icon la la-address-book"></i>
<span>
Manage
</span>
</a>
</li>
</ul>
</li>
@endcanUpdate app -> User.php with
...
use Backpack\CRUD\app\Models\Traits\CrudTrait;
use Spatie\Permission\Traits\HasRoles;
...
class User extends Model {
...
use CrudTrait;
use HasRoles;
...
}Run php artisan pagebuilder:user
Run with parameters
php artisan pagebuilder:user --name=Name [email protected] --password=password
Navigate to pages -> manage
Click the sync icon in the bottom right, this will load in static pages (Every folder that is not the dynamic folder) and it will reload the page
You also have the option to sync them from the command line with the following command
php artisan pagebuilder:sync
Navigate to the page management page and click edit on the homepage
Name: Page name, admin functionality only, does not affect the functionality of the page's at all
Title: Page title, also generates the slug as you type
Slug: Slug of the page
View: Page view
The page content populates with a list of sections, and their fields which you can edit.
See Editing Static Pages for a run down of Page Settings and Page Content
- Page Layout
Note - You can only use the Page Layout tab if you are working with a dynamic page
A list of dynamic sections will be displayed, you can click them to add them to the Content Section
The content section displays the sections that will be available to edit on the page
You will not be able to edit the content until you save the page
Pages are located at resources -> views -> pages each folder is considered as the page, with the contents inside
the folder dictating what view / sections are available
Contents
- Sections - Holds each individual section for that view
- config.php - Holds the configuration for the page sections
- index.blade.php - Is the view of the page
Note - Pages sections will not sync if there is not a .blade file inside the sections directory and
a config property inside the config.php
To generate a new page run the following command
php artisan pagebuilder:page page with page being the name of the new page
This will create a folder with the page name with the following structure
- page
- index.blade.php
- config.php
- sections
- default.blade.php
The sections folder holds the .blade files that correspond to the section key in the config.php
Using data inside a section
You have access to the $sections variable which is an anonymous function that returns
the field data from the section name and the field title
<h1>
{{-- default: section name, title: field name --}}
{{ $sections('default', 'title') }}
<br />
<small>
{{ $sections('default', 'sub-title') }}
</small>
</h1>
{!! $sections('default', 'content') !!}The config.php holds the configuration of the page sections.
Each section holds a list of backpack crud fields https://backpackforlaravel.com/docs/4.1/crud-fields
any field, including custom fields will be available to be used inside the config.
Example config
<?php
return [
'default' => [ // Section name, the blade file for the section's name must be the same as this key
'is_dynamic' => true, // Defaults to false, if this is set it will be available to be used in dynamic pages
'title' => [ // Field name
'type' => 'text', // crud field type
'name' => 'title', // crud field name
'label' => 'Title' // crud field label
// ... Any other crud field properties
],
'sub-title' => [
'type' => 'text',
'name' => 'sub-title',
'label' => 'Sub Title'
],
'content' => [
'type' => 'wysiwyg',
'label' => 'Content',
'name' => 'content',
],
],
];The index.blade.php is the view file for the page and it's sections.
Example index.blade.php
<div>
@include('pages.homepage.sections.default')
</div>Please push your changes to a new branch before submitting a PR
- Within the root of an existing Laravel Backpack project, clone this project to
./packages/clevyr/backpack-page-builder - Add the following to your composer.json
"repositories": [
{
"type": "path",
"url": "./packages/clevyr/backpack-page-builder",
"options": {
"symlink": true
}
}
],- Add
clevyr/backpack-page-builderto your list of requires in yourcomposer.jsonlike below:
"require": {
...
"clevyr/backpack-page-builder": "dev-master",
...
}- Run
composer require clevyr/backpack-page-builder
