hexters / Ladmin

Ladmin (Laravel Admin)

Make an Administrator page in 5 minutes

Index

• Laravel Version
• Note
• Installation
• Manage Sidebar & Top Menu
• Create Datatables server
• Role & Permission
• User Activity
• Blade Layout
• Blade Components
  • Card Component
  • Form Group Componenet
• Icons
• Custom Style
• Notification
• Ladmin Plugins

Laravel Version

Note

Before using this package you must already have a login page or route login route('login') for your members, you can use laravel/breeze, larave/ui or laravel jetstream.

For member pages, you should use a different guard from admin or vice versa.

Installation

You can install this package via composer:

$ composer require hexters/ladmin

Add this trait to your user model

. . .
use Hexters\Ladmin\LadminTrait;

class User extends Authenticatable {

  use Notifiable, LadminTrait;

  . . .

Publish asset and system package

$ php artisan vendor:publish --tag=assets --force
$ php artisan vendor:publish --tag=core

Attach role to user admin with database seed or other

. . .

  $role = \App\Models\Role::first();
  \App\Models\User::factory(10)->create()
    ->each(function($user) use ($role) {
      $user->roles()->sync([$role->id]);
    });

. . .

Ladmin need the database notification. see the documentation Database Notifications

$ php artisan notifications:table

Migrate database

$ php artisan migrate --seed

Add Ladmin route to your route project routes/web.php

. . .

use Illuminate\Support\Facades\Route;
use Hexters\Ladmin\Routes\Ladmin;

. . .

Ladmin::route(function() {

    Route::resource('/withdrawal', WithdrawalController::class); // Example

});

. . .

Installation finish, you can Access admin page in this link below.

http://localhost:8000/administrator

Manage Sidebar & Top Menu

To add a menu open app/Menus/sidebar.php file and top_right.php

Create Datatables server

Create datatables server to handle your list of data

$ php artisan make:datatables UserDataTables  --model=User

Example below

. . .

use App\DataTables\UserDataTables;

class UserController extends Controller {

  . . .

  public function index() { 

    . . .

    return UserDataTables::view();

    // OR custom view and custom data

    return UserDataTables::view('your.custom.view', [ 
      /**
       * You can catch this data form blade or UserDatatables class 
       * via static property `self$data`
       */
      'foo' => 'bar'
    ]);

  }

. . .

Role & Permission

Protect your module via Controller

. . . 
class UserController extends Controller {

  . . .

  public function index() {

    ladmin()->allow(['administrator.account.admin.index']) // Call the gates based on menu `app/Menus/sidebar.php`

    . . .

    

For an other you can use @can() from blade or auth()->user()->can() more Gates

User Activity

Add this trait Hexters\Ladmin\LadminLogable to all the models you want to monitor. Inspired by haruncpi/laravel-user-activity

. . .

use Hexters\Ladmin\LadminLogable;

class Role extends Model {
    
    use HasFactory, LadminLogable;

. . .

System Log

Blade Layout

Ladmin layout

  <x-ladmin-layout>
    <x-slot name="title">Title Page</x-slot>
    <x-slot name="buttons">
      {-- Top Buttons --}      
    </x-slot>

    {-- Your content here --}    

  </x-ladmin-layout>
  

Datatables Render

If you have a custom view for render data from Datatables server you should call this component to render your table

<x-ladmin-datatables :fields="$fields" :options="$options" />

Attributes

Icons

You can user Fontawesome or SVG file in resources/assets/icons, svg file retrieved from site Heroicons

  ladmin()->icon('fas fa-user')

  // OR

  ladmin()->icon('user')

  // OR 

  ladmin()->icon('somefolder.customicon') // resources/assets/icons/somefolder/customicon.svg

Custom Style

Install node modules

$ npm i jquery popper.js bootstrap @fortawesome/fontawesome-free [email protected] [email protected] vue --save

// OR

$ yarn add jquery popper.js bootstrap @fortawesome/fontawesome-free [email protected] [email protected] vue

Add this code to your webpack.mix.js file

mix.js('resources/js/ladmin/app.js', 'public/js/ladmin/app.js')
   .sass('resources/sass/ladmin/app.scss', 'public/css/ladmin/app.css');

Custom Avatar

By default admin uses gravatar. If you want to change it, add the avatar_url field to yourusers table and it must be a URL value.

Call avatar url below

  $user->gravatar_url
  // out: gravatar url / your custom url

Notification

By default notification has activated, you can disable notification with set value to false

. . .

'notification' => false

. . .

Send notification

ladmin()
  ->notification()
    ->setTitle('new Invoice')
    ->setLink('http://project.test/invoice/31eb6d58-3622-42a4-9206-d36e7a8d6c06')
    ->setDescription('Pay invoice #123455')
    ->setImageLink('http://porject.test/icon-invoice.ong') // optional
    ->setGates(['administrator.accounting', 'administrator.owner']) // optional
  ->send()

Notification required |Option|Type|required|Note| |-|-|:-:|-| |setTitle|String|YES|-| |setLink|String|YES|-| |setImageLink|String|NO|-| |setDescription|String|YES|-| |setGates|Array|NO| default all gates |

Listening For Notifications

Notifications will broadcast on a private channel formatted using a {notifiable}.{id} convention. View complete Documentation

  // Change App.Models.User bas on config('ladmin.user')

  Echo.private('App.Models.User.' + userId)
    .notification((notification) => {
        console.log(notification.type);
    });

Options

You can store the option for your application with the ladmin option,

Create or Update option

Data type of value is String, Number and Array

  ladmin()->update_option('my-option', ['foo', 'bar', 'baz']);
  // out: boolean

Get Option Value

  ladmin()->get_option('my-option');
  // out: Array ['foo', 'bar', 'baz']

Delete Option

ladmin()->delete_option('my-option');
// out: boolean