“Radmin - Laravel Starter with REST API, User Roles and Permission” Documentation by “Md. Rakibul Islam” v2.6.0


“Radmin - Laravel Starter with REST API, User Roles and Permission”

Created: 13/03/2020
Updated: 13/04/2021
By: Md. Rakibul Islam
Email: rakib1708@gmail.com

Thank you for purchasing my template. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!


Table of Contents

  1. Installation
  2. Page Structure
  3. Create New Page
  4. Sidebar
  5. REST API
  6. Roles & Permissions
  7. Serverside Datatable
  8. Editable Datatable
  9. Sources and Credits

A) Installation - top

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 phpmyadmin and assign Super Admin role. Because Super Admin role can access all the premissions.


For Laravel Mix
npm install
npm run dev

Credentials

Super Admin: admin@test.com
HR: hr@test.com
Project Manager: pm@test.com
Sales Manager: sm@test.com

Password: 1234

B) Page Structure - top

This template is a fixed layout with header, left sidebar, right sidebar (chat List) and main content area. All of the information within the main content area is yeilded within a div with an class of "main-content". Left sidebar's (menu) content is within a div with an class of "app-sidebar". Here is the general folder structure of blade files.

HTML Structure

The general template structure is the same throughout the template. Here is the 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>

C) Create New Page - top

If you would like to create a new page the basic structure of the page is

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
@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'

Basically this template has two sidebar. First one is left sidebar which is used as menu and second one is used for chatlist

If you want to add a new menu items in the sidebar open resources/views/include/sidebar.blade.php and add menu

1
2
3
4
5
6
<div class="nav-item {{ ($segment1 == 'menu-route') ? 'active' : '' }}">
     <a href="{{url('menu-route')}}">
         <i class="ik ik-bar-chart-2"></i>
         <span>Menu Name</span>
     </a>
</div>

Note $segment1 is use to determine active url

				$segment1 = request()->segment(1);
			

Suppose https://rakibhstu.com/portfolio-cat/core-php/ is the basic url. here portfolio-cat is segment(1) and core-php is segment(2)


E) REST API - top

The Radmin API is a low-level HTTP-based API for a Laravel admin starter kit that you can use to create/edit/update

Radmin API uses Laravel Passport

Documentation: https://documenter.getpostman.com/view/11223504/Szmh1vqc?version=latest

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

User must set request header with this data
'headers' => [
    'Accept' => 'application/json',
    'Authorization' => 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwczpcL1wvd29ya3N1aXRlLmRldlwvYXBpXC92MVwvYXV0aFwvbG9naW4iLCJpYXQiOjE1ODAyODA3MjksImV4cCI6MTYxMTkwMzEyOCwibmJmIjoxNTgwMjgwNzI5LCJqdGkiOiJBYXE1QkdnT0p1dG1ycUdIIiwic3ViIjoxLCJwcnYiOiI4MThmNWM5OGFjZTIzNzUzMmQ5ZDQ5NDNmZDhlZmI1NDBiODU1YjQyIiwicmVtZW1iZXIiOjEsInR5cGUiOjF9.wK4OhcwUWa9uwFboqkZCOznjnRnjU19yzoCGCKIZUY0',
],

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/1 Note:1 is id, you can replace it with any id
GET /api/v1/user/delete/1 Note:1 is id, you can replace it with any id
POST /api/v1/user/change-role/1 {role[]}Note:1 is id, you can replace it with any id
GET /api/v1/roles
POST /api/v1/role/create {name, permissions[]}
GET /api/v1/
GET /api/v1/role/1 Note:1 is id, you can replace it with any id
GET /api/v1/role/delete/1 Note:1 is id, you can replace it with any id
POST /api/v1/role/change-permission/1 {permissions[]}Note:1 is id, you can replace it with any id
GET /api/v1/permissions
POST /api/v1/permission/create {name}
GET /api/v1/
GET /api/v1/permission/1 Note:1 is id, you can replace it with any id
GET /api/v1/permission/delete/1 Note:1 is id, you can replace it with any id

F) Roles and Permission - top

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

If you'd like to open a group of routes for some sprcific permission in the route file follow this example

		//only those have permission_name permission will get access

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

For single route,

		Route::get('route-elements')->middleware('can:permission_name1|permission_name2');

		Route::get('route-elements')->middleware('can:permission_name');
		

Now in blade area for specific content, you can define as-

		@can('permission_name')
			content here
		@endcan
		

Note: as Super Admin role has all the permissions. If you want to change Super Admin role name then you have to configure AuthServiceProvider.php .

File location app/Providers/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


E) Serverside Datatable (yajra) - top

Basic usage of server side datatable to reduce the loading time of data. Laravel DataTables is a package that handles the server-side works of DataTables using Laravel.

Official serverside datatable documentation is heres

G) Editable Datatable (ejbeaty) - top

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

Basic script of an editable datatable is

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
}

Note: must include the associate css & js files


I) Sources and Credits - top


Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on Codecanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Md. Rakibul Islam

Go To Table of Contents