DOCUMENTATION

Last updated: April 13, 2021 Version: 2.6.0

Installation

Database

Create a database in phpmyadmin. Open .env file and change following credentials

DB_DATABASE=your_database_name
DB_USERNAME=your_database_user
DB_PASSWORD=your_database_password

Don't forget to import database.sql file which is located in projects database folder or manually create a user in users table and assign Super Admin role. Super Admin role can access all the premissions.

Database Migration

Run php artisan migrate to migrate database

Laravel Mix

Laravel Mix is a fluent API for defining webpack build steps for your Laravel application using several common CSS and JavaScript pre-processors. To initialize Laravel Mix

// Install Node.js 
npm install

// Run all Mix tasks...
npm run dev

// Run all Mix tasks and minify output...
npm run prod                               

Add css in webpack.mix.js styles array

mix.styles([
    'public/plugins/bootstrap/dist/css/bootstrap.min.css',
    .......................................
], 'public/all.css');

Add js in webpack.mix.js scripts array

mix.scripts([
    'public/src/js/vendor/modernizr-2.8.3.min.js',
    .......................................
], 'public/all.js');

Page Architecture

Main Layout

Main layout structure located in resources/views/layouts/main.blade.php

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" >
<head>
	<!-- initiate head with meta tags, css and script -->
	@include('include.head')
</head>
<body id="app">
    <div class="wrapper">
    	<!-- initiate header-->
    	@include('include.header')
    	<div class="page-wrap">
	    	<!-- initiate sidebar-->
	    	@include('include.sidebar')
	    	<div class="main-content">
	    		<!-- yeild contents here -->
	    		@yield('content')
	    	</div>
	    	<!-- initiate chat section-->
	    	@include('include.chat')
	    	<!-- initiate footer section-->
	    	@include('include.footer')
    	</div>
    </div>    
	<!-- initiate modal menu section-->
	@include('include.modalmenu')
	<!-- initiate scripts-->
	@include('include.script')	
</body>
</html>

Blank Page

This is a common blank page structure.

@extends('layouts.main') 

@section('content')
    <!-- push external head elements to head -->
    @push('head')
        <title>Page title | Site title</title>
        <!-- add some inline style or css file if any -->
        <link rel="stylesheet" href="{{ asset('file-path')}}">
        <style type="text/css">
        	/* inline css
        </style>
    @endpush
    <div class="container-fluid">
    	<!-- page contents here -->
    </div>
    <!-- push external js if any -->
    @push('script') 
        <script src="{{ asset('script-path') }}"></script>
    @endpush
@endsection

REST API

A low level HTTP based CRUD and basic authentication API that used Laravel Passport for Authentication.

Get documentation here, here.

Connect API

After successful login, an access_token will be provided to user. This token will be used for further requests.

Access token will be like,

eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwczpcL1wvd29ya3N1aXRlLmRldlwvYXBpXC92MVwvYXV0aFwvbG9naW4iLCJpYXQiOjE1ODAyODA3MjksImV4cCI6MTYxMTkwMzEyOCwibmJmIjoxNTgwMjgwNzI5LCJqdGkiOiJBYXE1QkdnT0p1dG1ycUdIIiwic3ViIjoxLCJwcnYiOiI4MThmNWM5OGFjZTIzNzUzMmQ5ZDQ5NDNmZDhlZmI1NDBiODU1YjQyIiwicmVtZW1iZXIiOjEsInR5cGUiOjF9.wK4OhcwUWa9uwFboqkZCOznjnRnjU19yzoCGCKIZUY0

Set Authorization header to connect API in request header

'headers' => [
    'Accept' => 'application/json',
    'Authorization' => 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwczpcL1wvd29ya3N1aXRlLmRldlwvYXBpXC92MVwvYXV0aFwvbG9naW4iLCJpYXQiOjE1ODAyODA3MjksImV4cCI6MTYxMTkwMzEyOCwibmJmIjoxNTgwMjgwNzI5LCJqdGkiOiJBYXE1QkdnT0p1dG1ycUdIIiwic3ViIjoxLCJwcnYiOiI4MThmNWM5OGFjZTIzNzUzMmQ5ZDQ5NDNmZDhlZmI1NDBiODU1YjQyIiwicmVtZW1iZXIiOjEsInR5cGUiOjF9.wK4OhcwUWa9uwFboqkZCOznjnRnjU19yzoCGCKIZUY0',
],

Authorization Header

Authorization value must follow bearer token structure Bearer access_token

Available Endpoints
Method URl Parameters
POST /api/v1/login {email, password}
GET /api/v1/profile
POST /api/v1/change-password {old_password, password, password_confirmation}
POST /api/v1/update-profile {name, email}
GET /api/v1/logout
GET /api/v1/users
POST /api/v1/create_user {name, email, password, password_confirmation, role[]}
GET /api/v1/user/{id}

{id} should replaced with value

GET /api/v1/user/delete/{id}

{id} should replaced with value

POST /api/v1/user/change-role/{id}

{id} should replaced with value

GET /api/v1/roles
POST /api/v1/role/create {name, permissions[]}
GET /api/v1/role/{id}

{id} should replaced with value

GET /api/v1/role/delete/{id}

{id} should replaced with value

POST /api/v1/role/change-permission/{id}

{id} should replaced with value

GET /api/v1/permissions
POST /api/v1/permission/create {name}
GET /api/v1/permission/{id}

{id} should replaced with value

GET /api/v1/permission/delete/{id}

{id} should replaced with value

Roles & Permission

In this template, I create some users with different roles and permission. Lets see, how to apply this permissions in any where

Grouped Route
//only those have permission_name permission will get access

Route::group(['middleware' => 'can:permission_name1|permission_name2'], function(){
    //route here
})
Single Route
Route::get('route-elements')->middleware('can:permission_name1|permission_name2');

Route::get('route-elements')->middleware('can:permission_name');
Blade Component
@can('permission_name')
    content here
@endcan
Super Admin

Note: as Super Admin role has all the permissions. Add selected Super Admin in app/provider/AuthServiceProvider.php .

Gate::before(function ($user, $ability) {
    return $user->hasRole('Super Admin') ? true : null; //if change name
});

For more tutorials about roles and permissions you can visit here

Editable Datatable (ejbeaty)

Cell edit plugin allows cells within a DataTable to be editable. When a cell is click on, an input field will appear. When focus is lost on the input and the underlying DataTable object will be updated and the table will be redrawn. The new value is passed to a callback function, along with it's row, allowing for easy server-side data updates.

Editable Datatable
var dTable = $('#table_name').DataTable({});
dTable.MakeCellsEditable({
    "onUpdate": callFunction, //call function to update in backend
    "inputCss":'form-control',
    "columns": [0], // define column numbers to be editable
    "confirmationButton": { // could also be true
        "confirmCss": 'btn btn-success',
        "cancelCss": 'btn btn-danger'
    },
    "inputTypes": [
        {
            "column": 0,
            "type": "text",
            "options": null
        }
        // set column properties if add a new one
        
    ]
});

// update function

function callFunction(updatedCell, updatedRow, oldValue) {
    //do anything
}

Source & Credits

  • Themekit Admin Template from Lavalite
  • laravel Passport
  • laravel-permission from Spaite
  • Laravel Datatables from Jack Mcdade
  • CellEdit from Ejbeaty
  • Amcharts
  • Ammap3
  • Bootstrap
  • C3.js from C3 Team
  • Chartist from Gion Kunz
  • D3.js from Mike Bostock
  • JSZip from Stuart Knightley
  • DataTables from SpryMedia Ltd
  • Flot-Charts from IOLA and Ole Laursen
  • FullCalendar from Adam Shaw
  • Ionicons from Ben Sperry
  • jQuery MiniColors from Cory LaViska
  • jQuery UI from jQuery Foundation
  • jquery.repeater from Brian Detering
  • Nestable jQuery Plugin from David Bushell
  • Owl Carousel from David Deutsch
  • perfect-scrollbar from Hyunje Jun
  • popper from Federico Zivolo
  • screenfull from Sindre Sorhus
  • Select2 from Select2
  • Summernote from Alan Hong
  • Tempus Dominus Bootstrap4 from Jonathan Peterson
  • Weather Icons from Dave Gandy

Are you stuck with setting up an admin panel in laravel?

Instance Theme

Radmin - Laravel Admin starter with REST API, User Roles & Permission

Check out Radmin - a Laravel starter kit REST API, Advanced user, roles & permission management , Serverside Datatable, Datatable Edit and Export( CSV, EXCEL, PRINT, PDF, COPY), Cache Management, XSS protection with advanced form elements, chat wizard, charts, widgets and 30+ other glamorous plugins. .

Kikstar with Radmin to boost your development..

View Demo