Laravel Admin Package – Scaffolding

What is Laravel?

Laravel is a free, open-source PHP web framework, intended for the development of web applications following the model-view-controller (MVC) architectural pattern and based on “Symfony”.

Laravel Voyager is a new package created by The Control Group that provides a complete admin system to quickly scaffold out your app.

What it is?

Voyager is simply an admin for your Laravel app. Whatever you want your app to do on the front-end is completely up to you. You are in control of your application and you can use Voyager to make your life easier by adding data, editing users, creating menus, and many other administrative tasks.

  • An admin interface for your Laravel app
  • An easy way to add/edit/delete data for your app
  • A menu builder (build menus in Voyager for your app)
  • A media manager for your files
  • CRUD/BREAD generator

 

Installation

Voyager is super easy to install. After creating your new Laravel application you can include the Voyager package with the following command

composer require tcg/voyager

Finally, we can install Voyager. You can choose to install Voyager with dummy data or without the dummy data. The dummy data will include 1 admin account (if no users already exist), 1 demo page, 4 demo posts, 2 categories and 7 settings.

To install Voyager without dummy data simply run:

php artisan voyager:install

If you prefer installing it with the dummy data run the following command:

php artisan voyager:install –with-dummy

And we’re all good to go!

Start up a local document server with php artisan serve or via XAMPP server And, visit the URL http://localhost:8000/admin in your browser.

If you installed with the dummy data, a user has been created for you with the following login credentials:

Email – admin@admin.com

Password – password

A dummy user is only created if there are no current users in your database.

If you did not go with the dummy user, you may wish to assign admin privileges to an existing user. This can easily be done by running this command:

php artisan voyager:admin your@email.com

If you wish to create a new admin user you can pass the –create flag, like so:
php artisan voyager:admin your@email.com –create

And you will be prompted for the user’s name and password.

 

Configurations

With the installation of Voyager you will find a new configuration file located at config/voyager.php. In this file you can find various options to change the configuration of your Voyager installation.

If you cache your configuration files please make sure to run php artisan config:clear after you changed something.

Below is the various configuration files and detailed description of each configuration set.

USERS:

<?php

‘user’ => [

‘add_default_role_on_register’ => true,

‘default_role’                 => ‘user’,

‘admin_permission’             => ‘browse_admin’,

‘namespace’                    => App\User::class,

‘redirect’                     => ‘/admin’

],

add_default_role_on_register: Specify whether you would like to add the default role to any new user that is created.

default_role: You can also specify what the default_role is of the user.

admin_permission: The permission needed to view the admin dashboard.

namespace: The namespace of your apps User Class.

redirect: Redirect path after the user logged in.

CONTROLLER:

<?php

‘controllers’ => [

‘namespace’ => ‘TCG\\Voyager\\Http\\Controllers’,

],

 

You can specify the default controller namespace of Voyager. If you ever wish to override any of the core functionality of Voyager you can do so by duplicating the Voyager controllers and specifying the location of your custom controllers.

Overwrite a single controller If you only want to overwrite a single controller, you might consider adding the following piece of code to your AppServiceProvider class in the register method.

$this->app->bind(VoyagerBreadController::class, MyBreadController::class);

MODEL:

<?php

‘models’ => [

//’namespace’ => ‘App\\’,

],

You can specify the namespace or location of your models. This is used when creating the Models from the database section of Voyager. If not defined the default application namespace will be used.

ASSETS:

<?php

‘assets_path’ => ‘/vendor/tcg/voyager/assets’,

You may wish to specify a different asset path. If your site lives in a subfolder you may need to include that directory to the beginning of the path. This may also be used in case you wish to duplicate the published assets and customize your own.

When upgrading to new version of voyager the assets located in the /vendor/tcg/voyager/assets directory may need to be overwritten, so if you wish to customize any styles you will want to duplicate that directory and specify the new location of your asset_path.

STORAGE:

<?php

‘storage’ => [

‘disk’ => ‘public’,

],

 

By default, Voyager is going to use the public local storage. You can additionally use any driver inside of your config/filesystems.php. This means you can use S3, Google Cloud Storage, or any other file storage system you would like.

DATABASE:

<?php

‘database’ => [

‘tables’ => [

‘hidden’ => [‘migrations’, ‘data_rows’, ‘data_types’, ‘menu_items’, ‘password_resets’, ‘permission_role’, ‘settings’],

],

],

You may wish to hide some database tables in the Voyager database section. In the database config you can choose which tables would like to hide.

MULTILINGUAL:

<?php

‘multilingual’ => [

‘enabled’ => false,

‘default’ => ‘en’,

‘locales’ => [

‘en’,

//’pt’,

],

],

You can specify whether or not you want to enable mutliple languages. You can then specify your default language and all the support languages (locales)

DASHBOARD:

<?php

‘dashboard’ => [

‘navbar_items’ => [

‘Profile’ => [

‘route’         => ‘voyager.profile’,

‘classes’       => ‘class-full-of-rum’,

‘icon_class’    => ‘voyager-person’,

],

‘Home’ => [

‘route’         => ‘/’,

‘icon_class’    => ‘voyager-home’,

‘target_blank’  => true,

],

‘Logout’ => [

‘route’      => ‘voyager.logout’,

‘icon_class’ => ‘voyager-power’,

],

],

‘widgets’ => [

‘TCG\\Voyager\\Widgets\\UserDimmer’,

‘TCG\\Voyager\\Widgets\\PostDimmer’,

‘TCG\\Voyager\\Widgets\\PageDimmer’,

],

],

In the dashboard config you can add navbar_items, make the data_tables responsive, and manage your dashboard widgets.

navbar_items Include a new route in the main user navbar dropdown by including a ‘route’, ‘icon_class’, and ‘target_blank’.

data_tables If you set ‘responsive’ to true the datatables will be responsive.

widgets Here you can manage the widgets that live on your dashboard. You can take a look at an example widget class by viewing the current widgets inside of tcg/voyager/src/Widgets.

PRIMARY COLOR:

<?php

‘primary_color’ => ‘#22A7F0’,

The default primary color for the Voyager admin dashboard is a light blue color. You can change that primary color by changing the value of this config.

DEVELOPER TIPS:

<?php

‘show_dev_tips’ => true,

In the Voyager admin there are developer tips or notifications that will show you how to reference certain values from Voyager. You can choose to hide these notifications by setting this configuration value to false.

ADDITIONAL STYLESHEETS:

<?php

‘additional_css’ => [

//’css/custom.css’,

],

You can add your own custom stylesheets that will be included in the Voyager admin dashboard. This means you could technically create a whole new theme for Voyager by adding your own custom stylesheet.

ADDITIONAL JAVASCRIPT

<?php

‘additional_js’ => [

//’js/custom.js’,

],

The same goes for this configuration. You can add your own javascript that will be executed in the Voyager admin dashboard. Add as many javascript files as needed.

GOOGLE MAPS:

<?php

‘googlemaps’ => [

‘key’    => env(‘GOOGLE_MAPS_KEY’, ”),

‘center’ => [

‘lat’ => env(‘GOOGLE_MAPS_DEFAULT_CENTER_LAT’, ‘32.715738’),

‘lng’ => env(‘GOOGLE_MAPS_DEFAULT_CENTER_LNG’, ‘-117.161084’),

],

‘zoom’ => env(‘GOOGLE_MAPS_DEFAULT_ZOOM’, 11),

],

There is a new data type called coordinates that allow you to add a google map as a datatype. The user can then drag and drop a pin in the Google Maps to save a longitude and latitude value in the database.

In this config you can set the default Google Maps Keys and center location. This can also be added to your .env file.

In this way, you can install and configure Laravel scaffolding Voyager package and leverage its features.