Laravel 5.6 Admin Panel Example Tutorial From Scratch

Laravel Redirect To Another URL / Web Page - HTTP Laravel Redirects

Today, We want to share with you Laravel 5.6 Admin Panel Example Tutorial From Scratch.In this post we will show you Laravel 5.6 Create admin panel from scratch, hear for Laravel 5.6 – create quick backend admin panel tutorial we will give you demo and example for implement.In this post, we will learn about How To Integrate Admin Template In Laravel 5.6 Tutorial with an example.

Laravel 5.6 Admin Panel Example Tutorial From Scratch

There are the Following The simple About Laravel 5.6 Admin Panel Example Tutorial From Scratch Full Information With Example and source code.

As I will cover this Post with live Working example to develop Laravel 5.6 Admin Panel Tutorial, so the some major files and Directory structures for this example is following below.

  • Create Laravel 5.6 Project
  • Install Laravel 5.6 Admin Panel
  • Move some files and folder
  • create master.blade.php
  • Make Laravel 5.6 Route

Laravel 5.6 Admin Panel Example Tutorial From Scratch

I am gonna to settings your Laravel 5.6 project. And then, for Laravel 5.6 project, I am not gonna to use any old Bootstrap 4 version because the not AdminLTE Laravel 5.6 Admin Panel Tutorial does not support your class of the Bootstrap 4, it supports old version of the Bootstrap 3. Therefor, I shall not use the simple app.scss files or Directory provided by simple Laravel 5.6.

Step 1: Create Laravel 5.6 Project


composer create-project --prefer-media laravel/laravel admintemplate

Step 2: Install AdminLTE Admin Panel using NPM

//npm Laravel 5.6 Admin Panel Example Tutorial From Scratch
npm install [email protected] --save


//Node package manager (NPM):
npm install


//webpack.mix.js file
npm run dev

Step 3: Move font-awesome main Directory to public Directory.

And then, I should to Directory of font-awesome to showing the small icons glyphicons inside our main master admin panel. so move the img Directory to public Directory

Step 4 : Make a view file

resources >> views >> master.blade.php

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Pakainfo.com  Laravel 5.6| Dashboard - Laravel 5.6 Admin Panel Example Tutorial From Scratch</title>
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, member-scalable=no" name="viewport">
  
  <link rel="stylesheet" href="{{asset('css/app.css')}}">
  <link rel="stylesheet" href="{{asset('font-awesome/css/font-awesome.min.css')}}">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

  <header class="main-header">
    
    <a href="index2.html" class="logo">
      
      <span class="logo-mini"><b>A</b>LT</span>
      
      <span class="logo-lg"><b>Admin</b>LTE</span>
    </a>
    
    <nav class="navbar navbar-static-top">
      
      <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
        <span class="sr-only">Toggle navigation</span>
      </a>

      <div class="navbar-custom-menu">
        <ul class="nav navbar-nav">
          <li class="dropdown messages-menu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <i class="pk pk-envelope-o"></i>
              <span class="label label-success">4</span>
            </a>
            <ul class="dropdown-menu">
              <li class="header">You have 4 messages</li>
              <li>
                
                <ul class="menu">
                  <li>
                    <a href="#">
                      <div class="pull-left">
                        <img src="{{ asset('img/user2-160x160.jpg') }}" class="img-circle" alt="User Image">
                      </div>
                      <h4>
                        Support Team
                        <small><i class="pk pk-clock-o"></i> 5 mins</small>
                      </h4>
                      <p>Why not buy a new awesome pakainfo?</p>
                    </a>
                  </li>
                  
                  <li>
                    <a href="#">
                      <div class="pull-left">
                        <img src="{{ asset('img/avatar.png') }}" class="img-circle" alt="User Image">
                      </div>
                      <h4>
                        Laravel 5.6 Admin Panel Example Tutorial From Scratch
                        <small><i class="pk pk-clock-o"></i> 2 hours</small>
                      </h4>
                      <p>Why not buy a new awesome pakainfo?</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="pull-left">
                        <img src="{{ asset('img/user4-128x128.jpg') }}" class="img-circle" alt="User Image">
                      </div>
                      <h4>
                        Developers
                        <small><i class="pk pk-clock-o"></i> Today</small>
                      </h4>
                      <p>Why not buy a new awesome pakainfo?</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="pull-left">
                        <img src="media/img/user3-128x128.jpg" class="img-circle" alt="User Image">
                      </div>
                      <h4>
                        Sales Department
                        <small><i class="pk pk-clock-o"></i> Yesterday</small>
                      </h4>
                      <p>Why not buy a new awesome pakainfo?</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <div class="pull-left">
                        <img src="media/img/user4-128x128.jpg" class="img-circle" alt="User Image">
                      </div>
                      <h4>
                        Reviewers
                        <small><i class="pk pk-clock-o"></i> 2 days</small>
                      </h4>
                      <p>Why not buy a new awesome pakainfo?</p>
                    </a>
                  </li>
                </ul>
              </li>
              <li class="footer"><a href="#">See All Messages</a></li>
            </ul>
          </li>
          
          <li class="dropdown notifications-menu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <i class="pk pk-bell-o"></i>
              <span class="label label-warning">10</span>
            </a>
            <ul class="dropdown-menu">
              <li class="header">You have 10 notifications</li>
              <li>
                
                <ul class="menu">
                  <li>
                    <a href="#">
                      <i class="pk pk-users text-aqua"></i> 5 new members joined today
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <i class="pk pk-warning text-yellow"></i> Very long description here that may not fit into the
                      page and may cause design problems
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <i class="pk pk-users text-red"></i> 5 new members joined
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <i class="pk pk-shopping-cart text-green"></i> 25 member made
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <i class="pk pk-member text-red"></i> You changed your username
                    </a>
                  </li>
                </ul>
              </li>
              <li class="footer"><a href="#">View all</a></li>
            </ul>
          </li>
          
          <li class="dropdown tasks-menu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <i class="pk pk-flag-o"></i>
              <span class="label label-danger">9</span>
            </a>
            <ul class="dropdown-menu">
              <li class="header">You have 9 tasks</li>
              <li>
                
                <ul class="menu">
                  <li>
                    <a href="#">
                      <h3>
                        Design some buttons
                        <small class="pull-right">20%</small>
                      </h3>
                      <div class="progress xs">
                        <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar"
                             aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                          <span class="sr-only">20% Complete</span>
                        </div>
                      </div>
                    </a>
                  </li>
                  
                  <li>
                    <a href="#">
                      <h3>
                        Create a nice pakainfo
                        <small class="pull-right">40%</small>
                      </h3>
                      <div class="progress xs">
                        <div class="progress-bar progress-bar-green" style="width: 40%" role="progressbar"
                             aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                          <span class="sr-only">40% Complete</span>
                        </div>
                      </div>
                    </a>
                  </li>
                  
                  <li>
                    <a href="#">
                      <h3>
                        Some task I need to do
                        <small class="pull-right">60%</small>
                      </h3>
                      <div class="progress xs">
                        <div class="progress-bar progress-bar-red" style="width: 60%" role="progressbar"
                             aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                          <span class="sr-only">60% Complete</span>
                        </div>
                      </div>
                    </a>
                  </li>
                  
                  <li>
                    <a href="#">
                      <h3>
                        Make beautiful transitions
                        <small class="pull-right">80%</small>
                      </h3>
                      <div class="progress xs">
                        <div class="progress-bar progress-bar-yellow" style="width: 80%" role="progressbar"
                             aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                          <span class="sr-only">80% Complete</span>
                        </div>
                      </div>
                    </a>
                  </li>
                  
                </ul>
              </li>
              <li class="footer">
                <a href="#">View all tasks</a>
              </li>
            </ul>
          </li>
          <li class="dropdown member member-menu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <img src="{{ asset('img/user2-160x160.jpg') }}" class="member-image" alt="User Image">
              <span class="hidden-xs">Alexander Pierce</span>
            </a>
            <ul class="dropdown-menu">
              
              <li class="member-header">
                <img src="{{ asset('img/user2-160x160.jpg') }}" class="img-circle" alt="User Image">

                <p>
                  Alexander Pierce - Web Developer
                  <small>Member since Nov. 2012</small>
                </p>
              </li>
              
              <li class="member-body">
                <div class="row">
                  <div class="col-xs-4 text-center">
                    <a href="#">Followers</a>
                  </div>
                  <div class="col-xs-4 text-center">
                    <a href="#">Sales</a>
                  </div>
                  <div class="col-xs-4 text-center">
                    <a href="#">Friends</a>
                  </div>
                </div>
                
              </li>
              
              <li class="member-footer">
                <div class="pull-left">
                  <a href="#" class="btn btn-default btn-flat">Profile</a>
                </div>
                <div class="pull-right">
                  <a href="#" class="btn btn-default btn-flat">Sign out</a>
                </div>
              </li>
            </ul>
          </li>
          
          <li>
            <a href="#" data-toggle="live-admin control-sidebar"><i class="pk pk-gears"></i></a>
          </li>
        </ul>
      </div>
    </nav>
  </header>
  
  <aside class="main-sidebar">
    
    <section class="sidebar">
      
      <div class="member-panel">
        <div class="pull-left image">
          <img src="{{ asset('img/user2-160x160.jpg') }}" class="img-circle" alt="User Image">
        </div>
        <div class="pull-left info">
          <p>Alexander Pierce</p>
          <a href="#"><i class="pk pk-circle text-success"></i> Online</a>
        </div>
      </div>
      
      <form action="#" method="get" class="sidebar-form">
        <div class="input-group">
          <input type="text" name="q" class="form-live-admin control" placeholder="Search...">
          <span class="input-group-btn">
                <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="pk pk-search"></i>
                </button>
              </span>
        </div>
      </form>
      
      
      <ul class="sidebar-menu" data-widget="tree">
        <li class="header">MAIN NAVIGATION</li>
        <li class="active treeview">
          <a href="#">
            <i class="pk pk-dashboard"></i> <span>Dashboard</span>
            <span class="pull-right-container">
              <i class="pk pk-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li class="active"><a href="index.html"><i class="pk pk-circle-o"></i> Dashboard v1</a></li>
            <li><a href="index2.html"><i class="pk pk-circle-o"></i> Dashboard v2</a></li>
          </ul>
        </li>
        <li class="treeview">
          <a href="#">
            <i class="pk pk-files-o"></i>
            <span>Layout Options</span>
            <span class="pull-right-container">
              <span class="label label-primary pull-right">4</span>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="views/layout/top-nav.html"><i class="pk pk-circle-o"></i> Top Navigation</a></li>
            <li><a href="views/layout/boxed.html"><i class="pk pk-circle-o"></i> Boxed</a></li>
            <li><a href="views/layout/fixed.html"><i class="pk pk-circle-o"></i> Fixed</a></li>
            <li><a href="views/layout/collapsed-sidebar.html"><i class="pk pk-circle-o"></i> Collapsed Sidebar</a></li>
          </ul>
        </li>
        <li>
          <a href="views/widgets.html">
            <i class="pk pk-th"></i> <span>Widgets</span>
            <span class="pull-right-container">
              <small class="label pull-right bg-green">new</small>
            </span>
          </a>
        </li>
        <li class="treeview">
          <a href="#">
            <i class="pk pk-pie-chart"></i>
            <span>Charts</span>
            <span class="pull-right-container">
              <i class="pk pk-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="views/charts/chartjs.html"><i class="pk pk-circle-o"></i> ChartJS</a></li>
            <li><a href="views/charts/morris.html"><i class="pk pk-circle-o"></i> Morris</a></li>
            <li><a href="views/charts/flot.html"><i class="pk pk-circle-o"></i> Flot</a></li>
            <li><a href="views/charts/inline.html"><i class="pk pk-circle-o"></i> Inline charts</a></li>
          </ul>
        </li>
        <li class="treeview">
          <a href="#">
            <i class="pk pk-laptop"></i>
            <span>UI Elements</span>
            <span class="pull-right-container">
              <i class="pk pk-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="views/UI/general.html"><i class="pk pk-circle-o"></i> General</a></li>
            <li><a href="views/UI/icons.html"><i class="pk pk-circle-o"></i> Icons</a></li>
            <li><a href="views/UI/buttons.html"><i class="pk pk-circle-o"></i> Buttons</a></li>
            <li><a href="views/UI/sliders.html"><i class="pk pk-circle-o"></i> Sliders</a></li>
            <li><a href="views/UI/timeline.html"><i class="pk pk-circle-o"></i> Timeline</a></li>
            <li><a href="views/UI/modals.html"><i class="pk pk-circle-o"></i> Modals</a></li>
          </ul>
        </li>
        <li class="treeview">
          <a href="#">
            <i class="pk pk-edit"></i> <span>Forms</span>
            <span class="pull-right-container">
              <i class="pk pk-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="views/forms/general.html"><i class="pk pk-circle-o"></i> General Elements</a></li>
            <li><a href="views/forms/advanced.html"><i class="pk pk-circle-o"></i> Advanced Elements</a></li>
            <li><a href="views/forms/editors.html"><i class="pk pk-circle-o"></i> Editors</a></li>
          </ul>
        </li>
        <li class="treeview">
          <a href="#">
            <i class="pk pk-table"></i> <span>Tables</span>
            <span class="pull-right-container">
              <i class="pk pk-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="views/tables/simple.html"><i class="pk pk-circle-o"></i> Simple tables</a></li>
            <li><a href="views/tables/data.html"><i class="pk pk-circle-o"></i> Data tables</a></li>
          </ul>
        </li>
        <li>
          <a href="views/calendar.html">
            <i class="pk pk-calendar"></i> <span>Calendar</span>
            <span class="pull-right-container">
              <small class="label pull-right bg-red">3</small>
              <small class="label pull-right bg-blue">17</small>
            </span>
          </a>
        </li>
        <li>
          <a href="views/mailbox/mailbox.html">
            <i class="pk pk-envelope"></i> <span>Mailbox</span>
            <span class="pull-right-container">
              <small class="label pull-right bg-yellow">12</small>
              <small class="label pull-right bg-green">16</small>
              <small class="label pull-right bg-red">5</small>
            </span>
          </a>
        </li>
        <li class="treeview">
          <a href="#">
            <i class="pk pk-folder"></i> <span>Examples</span>
            <span class="pull-right-container">
              <i class="pk pk-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="views/demo/invoice.html"><i class="pk pk-circle-o"></i> Invoice</a></li>
            <li><a href="views/demo/profile.html"><i class="pk pk-circle-o"></i> Profile</a></li>
            <li><a href="views/demo/login.html"><i class="pk pk-circle-o"></i> Login</a></li>
            <li><a href="views/demo/register.html"><i class="pk pk-circle-o"></i> Register</a></li>
            <li><a href="views/demo/lockscreen.html"><i class="pk pk-circle-o"></i> Lockscreen</a></li>
            <li><a href="views/demo/404.html"><i class="pk pk-circle-o"></i> 404 Error</a></li>
            <li><a href="views/demo/500.html"><i class="pk pk-circle-o"></i> 500 Error</a></li>
            <li><a href="views/demo/blank.html"><i class="pk pk-circle-o"></i> Blank Page</a></li>
            <li><a href="views/demo/pace.html"><i class="pk pk-circle-o"></i> Pace Page</a></li>
          </ul>
        </li>
        <li class="treeview">
          <a href="#">
            <i class="pk pk-share"></i> <span>Multilevel</span>
            <span class="pull-right-container">
              <i class="pk pk-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="#"><i class="pk pk-circle-o"></i> Level One</a></li>
            <li class="treeview">
              <a href="#"><i class="pk pk-circle-o"></i> Level One
                <span class="pull-right-container">
                  <i class="pk pk-angle-left pull-right"></i>
                </span>
              </a>
              <ul class="treeview-menu">
                <li><a href="#"><i class="pk pk-circle-o"></i> Level Two</a></li>
                <li class="treeview">
                  <a href="#"><i class="pk pk-circle-o"></i> Level Two
                    <span class="pull-right-container">
                      <i class="pk pk-angle-left pull-right"></i>
                    </span>
                  </a>
                  <ul class="treeview-menu">
                    <li><a href="#"><i class="pk pk-circle-o"></i> Level Three</a></li>
                    <li><a href="#"><i class="pk pk-circle-o"></i> Level Three</a></li>
                  </ul>
                </li>
              </ul>
            </li>
            <li><a href="#"><i class="pk pk-circle-o"></i> Level One</a></li>
          </ul>
        </li>
        <li><a href="https://adminlte.io/docs"><i class="pk pk-book"></i> <span>Documentation</span></a></li>
        <li class="header">LABELS</li>
        <li><a href="#"><i class="pk pk-circle-o text-red"></i> <span>Important</span></a></li>
        <li><a href="#"><i class="pk pk-circle-o text-yellow"></i> <span>Warning</span></a></li>
        <li><a href="#"><i class="pk pk-circle-o text-aqua"></i> <span>Information</span></a></li>
      </ul>
    </section>
    
  </aside>

  
  <div class="content-wrapper">
    
    <section class="content-header">
      <h1>
        Dashboard
        <small>Control panel</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="pk pk-dashboard"></i> Home</a></li>
        <li class="active">Dashboard</li>
      </ol>
    </section>

    
    <section class="content">
      
      <div class="row">
        <div class="col-lg-3 col-xs-6">
          
          <div class="small-card bg-aqua">
            <div class="inner">
              <h3>150</h3>

              <p>New Orders</p>
            </div>
            <div class="icon">
              <i class="ion ion-bag"></i>
            </div>
            <a href="#" class="small-card-footer">More info <i class="pk pk-arrow-circle-right"></i></a>
          </div>
        </div>
        
        <div class="col-lg-3 col-xs-6">
          
          <div class="small-card bg-green">
            <div class="inner">
              <h3>53<sup style="font-size: 20px">%</sup></h3>

              <p>Bounce Rate</p>
            </div>
            <div class="icon">
              <i class="ion ion-stats-bars"></i>
            </div>
            <a href="#" class="small-card-footer">More info <i class="pk pk-arrow-circle-right"></i></a>
          </div>
        </div>
        
        <div class="col-lg-3 col-xs-6">
          
          <div class="small-card bg-yellow">
            <div class="inner">
              <h3>44</h3>

              <p>User Registrations</p>
            </div>
            <div class="icon">
              <i class="ion ion-person-add"></i>
            </div>
            <a href="#" class="small-card-footer">More info <i class="pk pk-arrow-circle-right"></i></a>
          </div>
        </div>
        
        <div class="col-lg-3 col-xs-6">
          
          <div class="small-card bg-red">
            <div class="inner">
              <h3>65</h3>

              <p>Unique Visitors</p>
            </div>
            <div class="icon">
              <i class="ion ion-pie-graph"></i>
            </div>
            <a href="#" class="small-card-footer">More info <i class="pk pk-arrow-circle-right"></i></a>
          </div>
        </div>
        
      </div>
      
      
      <div class="row">
        
        <section class="col-lg-7 connectedSortable">
          
          <div class="nav-tabs-custom">
            
            <ul class="nav nav-tabs pull-right">
              <li class="active"><a href="#revenue-chart" data-toggle="tab">Area</a></li>
              <li><a href="#member-chart" data-toggle="tab">Donut</a></li>
              <li class="pull-left header"><i class="pk pk-inbox"></i> Sales</li>
            </ul>
            <div class="tab-content no-padding">
              
              <div class="chart tab-pane active" id="revenue-chart" style="position: relative; height: 300px;"></div>
              <div class="chart tab-pane" id="member-chart" style="position: relative; height: 300px;"></div>
            </div>
          </div>
          

          
          <div class="card card-success">
            <div class="card-header">
              <i class="pk pk-comments-o"></i>

              <h3 class="card-title">Chat</h3>

              <div class="card-tools pull-right" data-toggle="tooltip" title="Status">
                <div class="btn-group" data-toggle="btn-toggle">
                  <button type="button" class="btn btn-default btn-sm active"><i class="pk pk-square text-green"></i>
                  </button>
                  <button type="button" class="btn btn-default btn-sm"><i class="pk pk-square text-red"></i></button>
                </div>
              </div>
            </div>
            <div class="card-body chat" id="chat-card">
              
              <div class="product">
                <img src="{{ asset('img/user4-128x128.jpg') }}" alt="member image" class="online">

                <p class="message">
                  <a href="#" class="name">
                    <small class="text-muted pull-right"><i class="pk pk-clock-o"></i> 2:15</small>
                    Mike Doe
                  </a>
                  pakainfo is the most popular Programming & Web Development blog. Our mission is to provide the best online resources on programming and web development. We deliver the useful and best tutorials for web professionals — developers, programmers, freelancers and site owners. Any visitors of this site are free to browse our tutorials, live demos and download scripts.
                </p>
                <div class="attachment">
                  <h4>Attachments:</h4>

                  <p class="filename">
                    Theme-thumbnail-image.jpg
                  </p>

                  <div class="pull-right">
                    <button type="button" class="btn btn-primary btn-sm btn-flat">Open</button>
                  </div>
                </div>
                
              </div>
              
              
              <div class="product">
                <img src="{{ asset('img/user3-128x128.jpg') }}" alt="member image" class="offline">

                <p class="message">
                  <a href="#" class="name">
                    <small class="text-muted pull-right"><i class="pk pk-clock-o"></i> 5:15</small>
                    Alexander Pierce
                  </a>
                  pakainfo is the most popular Programming & Web Development blog. Our mission is to provide the best online resources on programming and web development. We deliver the useful and best tutorials for web professionals — developers, programmers, freelancers and site owners. Any visitors of this site are free to browse our tutorials, live demos and download scripts.
                </p>
              </div>
              
              
              <div class="product">
                <img src="{{ asset('img/user2-160x160.jpg') }}" alt="member image" class="offline">

                <p class="message">
                  <a href="#" class="name">
                    <small class="text-muted pull-right"><i class="pk pk-clock-o"></i> 5:30</small>
                    Susan Doe
                  </a>
                  pakainfo is the most popular Programming & Web Development blog. Our mission is to provide the best online resources on programming and web development. We deliver the useful and best tutorials for web professionals — developers, programmers, freelancers and site owners. Any visitors of this site are free to browse our tutorials, live demos and download scripts.
                </p>
              </div>
              
            </div>
            
            <div class="card-footer">
              <div class="input-group">
                <input class="form-live-admin control" placeholder="Type message...">

                <div class="input-group-btn">
                  <button type="button" class="btn btn-success"><i class="pk pk-plus"></i></button>
                </div>
              </div>
            </div>
          </div>
          

          
          <div class="card card-primary">
            <div class="card-header">
              <i class="ion ion-clipboard"></i>

              <h3 class="card-title">To Do List</h3>

              <div class="card-tools pull-right">
                <ul class="pagination pagination-sm inline">
                  <li><a href="#">«</a></li>
                  <li><a href="#">1</a></li>
                  <li><a href="#">2</a></li>
                  <li><a href="#">3</a></li>
                  <li><a href="#">»</a></li>
                </ul>
              </div>
            </div>
            
            <div class="card-body">
              
              <ul class="todo-list">
                <li>
                  
                  <span class="handle">
                        <i class="pk pk-ellipsis-v"></i>
                        <i class="pk pk-ellipsis-v"></i>
                      </span>
                  
                  <input type="checkbox" value="">
                  
                  <span class="text">Design a nice pakainfo</span>
                  
                  <small class="label label-danger"><i class="pk pk-clock-o"></i> 2 mins</small>
                  
                  <div class="tools">
                    <i class="pk pk-edit"></i>
                    <i class="pk pk-trash-o"></i>
                  </div>
                </li>
                <li>
                      <span class="handle">
                        <i class="pk pk-ellipsis-v"></i>
                        <i class="pk pk-ellipsis-v"></i>
                      </span>
                  <input type="checkbox" value="">
                  <span class="text">Make the pakainfo responsive</span>
                  <small class="label label-info"><i class="pk pk-clock-o"></i> 4 hours</small>
                  <div class="tools">
                    <i class="pk pk-edit"></i>
                    <i class="pk pk-trash-o"></i>
                  </div>
                </li>
                <li>
                      <span class="handle">
                        <i class="pk pk-ellipsis-v"></i>
                        <i class="pk pk-ellipsis-v"></i>
                      </span>
                  <input type="checkbox" value="">
                  <span class="text">Let pakainfo shine like a star</span>
                  <small class="label label-warning"><i class="pk pk-clock-o"></i> 1 day</small>
                  <div class="tools">
                    <i class="pk pk-edit"></i>
                    <i class="pk pk-trash-o"></i>
                  </div>
                </li>
                <li>
                      <span class="handle">
                        <i class="pk pk-ellipsis-v"></i>
                        <i class="pk pk-ellipsis-v"></i>
                      </span>
                  <input type="checkbox" value="">
                  <span class="text">Let pakainfo shine like a star</span>
                  <small class="label label-success"><i class="pk pk-clock-o"></i> 3 days</small>
                  <div class="tools">
                    <i class="pk pk-edit"></i>
                    <i class="pk pk-trash-o"></i>
                  </div>
                </li>
                <li>
                      <span class="handle">
                        <i class="pk pk-ellipsis-v"></i>
                        <i class="pk pk-ellipsis-v"></i>
                      </span>
                  <input type="checkbox" value="">
                  <span class="text">Check your messages and notifications</span>
                  <small class="label label-primary"><i class="pk pk-clock-o"></i> 1 week</small>
                  <div class="tools">
                    <i class="pk pk-edit"></i>
                    <i class="pk pk-trash-o"></i>
                  </div>
                </li>
                <li>
                      <span class="handle">
                        <i class="pk pk-ellipsis-v"></i>
                        <i class="pk pk-ellipsis-v"></i>
                      </span>
                  <input type="checkbox" value="">
                  <span class="text">Let pakainfo shine like a star</span>
                  <small class="label label-default"><i class="pk pk-clock-o"></i> 1 month</small>
                  <div class="tools">
                    <i class="pk pk-edit"></i>
                    <i class="pk pk-trash-o"></i>
                  </div>
                </li>
              </ul>
            </div>
            
            <div class="card-footer clearfix no-border">
              <button type="button" class="btn btn-default pull-right"><i class="pk pk-plus"></i> Add product</button>
            </div>
          </div>
          

          
          <div class="card card-info">
            <div class="card-header">
              <i class="pk pk-envelope"></i>

              <h3 class="card-title">Quick Email</h3>
              
              <div class="pull-right card-tools">
                <button type="button" class="btn btn-info btn-sm" data-widget="remove" data-toggle="tooltip"
                        title="Remove">
                  <i class="pk pk-times"></i></button>
              </div>
              
            </div>
            <div class="card-body">
              <form action="#" method="post">
                <div class="form-group">
                  <input type="email" class="form-live-admin control" name="emailto" placeholder="Email to:">
                </div>
                <div class="form-group">
                  <input type="text" class="form-live-admin control" name="subject" placeholder="Subject">
                </div>
                <div>
                  <textarea class="textarea" placeholder="Message"
                            style="width: 100%; height: 125px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>
                </div>
              </form>
            </div>
            <div class="card-footer clearfix">
              <button type="button" class="pull-right btn btn-default" id="sendEmail">Send
                <i class="pk pk-arrow-circle-right"></i></button>
            </div>
          </div>

        </section>
        <section class="col-lg-5 connectedSortable">

          
          <div class="card card-solid bg-light-blue-gradient">
            <div class="card-header">
              
              <div class="pull-right card-tools">
                <button type="button" class="btn btn-primary btn-sm daterange pull-right" data-toggle="tooltip"
                        title="Date range">
                  <i class="pk pk-calendar"></i></button>
                <button type="button" class="btn btn-primary btn-sm pull-right" data-widget="collapse"
                        data-toggle="tooltip" title="Collapse" style="margin-right: 5px;">
                  <i class="pk pk-minus"></i></button>
              </div>
              

              <i class="pk pk-map-marker"></i>

              <h3 class="card-title">
                Visitors
              </h3>
            </div>
            <div class="card-body">
              <div id="world-map" style="height: 250px; width: 100%;"></div>
            </div>
            
            <div class="card-footer no-border">
              <div class="row">
                <div class="col-xs-4 text-center" style="border-right: 1px solid #f4f4f4">
                  <div id="sparkline-1"></div>
                  <div class="knob-label">Visitors</div>
                </div>
                
                <div class="col-xs-4 text-center" style="border-right: 1px solid #f4f4f4">
                  <div id="sparkline-2"></div>
                  <div class="knob-label">Online</div>
                </div>
                
                <div class="col-xs-4 text-center">
                  <div id="sparkline-3"></div>
                  <div class="knob-label">Exists</div>
                </div>
                
              </div>
              
            </div>
          </div>
          

          
          <div class="card card-solid bg-teal-gradient">
            <div class="card-header">
              <i class="pk pk-th"></i>

              <h3 class="card-title">Sales Graph</h3>

              <div class="card-tools pull-right">
                <button type="button" class="btn bg-teal btn-sm" data-widget="collapse"><i class="pk pk-minus"></i>
                </button>
                <button type="button" class="btn bg-teal btn-sm" data-widget="remove"><i class="pk pk-times"></i>
                </button>
              </div>
            </div>
            <div class="card-body border-radius-none">
              <div class="chart" id="line-chart" style="height: 250px;"></div>
            </div>
            
            <div class="card-footer no-border">
              <div class="row">
                <div class="col-xs-4 text-center" style="border-right: 1px solid #f4f4f4">
                  <input type="text" class="knob" data-readonly="true" value="20" data-width="60" data-height="60"
                         data-fgColor="#39CCCC">

                  <div class="knob-label">Mail-Orders</div>
                </div>
                
                <div class="col-xs-4 text-center" style="border-right: 1px solid #f4f4f4">
                  <input type="text" class="knob" data-readonly="true" value="50" data-width="60" data-height="60"
                         data-fgColor="#39CCCC">

                  <div class="knob-label">Online</div>
                </div>
                
                <div class="col-xs-4 text-center">
                  <input type="text" class="knob" data-readonly="true" value="30" data-width="60" data-height="60"
                         data-fgColor="#39CCCC">

                  <div class="knob-label">In-Store</div>
                </div>
                
              </div>
              
            </div>
            
          </div>
          

          
          <div class="card card-solid bg-green-gradient">
            <div class="card-header">
              <i class="pk pk-calendar"></i>

              <h3 class="card-title">Calendar</h3>
              
              <div class="pull-right card-tools">
                
                <div class="btn-group">
                  <button type="button" class="btn btn-success btn-sm dropdown-toggle" data-toggle="dropdown">
                    <i class="pk pk-bars"></i></button>
                  <ul class="dropdown-menu pull-right" role="menu">
                    <li><a href="#">Add new event</a></li>
                    <li><a href="#">Clear events</a></li>
                    <li class="divider"></li>
                    <li><a href="#">View calendar</a></li>
                  </ul>
                </div>
                <button type="button" class="btn btn-success btn-sm" data-widget="collapse"><i class="pk pk-minus"></i>
                </button>
                <button type="button" class="btn btn-success btn-sm" data-widget="remove"><i class="pk pk-times"></i>
                </button>
              </div>
              
            </div>
            
            <div class="card-body no-padding">
              
              <div id="calendar" style="width: 100%"></div>
            </div>
            
            <div class="card-footer text-black">
              <div class="row">
                <div class="col-sm-6">
                  
                  <div class="clearfix">
                    <span class="pull-left">Task #1</span>
                    <small class="pull-right">90%</small>
                  </div>
                  <div class="progress xs">
                    <div class="progress-bar progress-bar-green" style="width: 90%;"></div>
                  </div>

                  <div class="clearfix">
                    <span class="pull-left">Task #2</span>
                    <small class="pull-right">70%</small>
                  </div>
                  <div class="progress xs">
                    <div class="progress-bar progress-bar-green" style="width: 70%;"></div>
                  </div>
                </div>
                
                <div class="col-sm-6">
                  <div class="clearfix">
                    <span class="pull-left">Task #3</span>
                    <small class="pull-right">60%</small>
                  </div>
                  <div class="progress xs">
                    <div class="progress-bar progress-bar-green" style="width: 60%;"></div>
                  </div>

                  <div class="clearfix">
                    <span class="pull-left">Task #4</span>
                    <small class="pull-right">40%</small>
                  </div>
                  <div class="progress xs">
                    <div class="progress-bar progress-bar-green" style="width: 40%;"></div>
                  </div>
                </div>
                
              </div>
              
            </div>
          </div>
          

        </section>
        
      </div>
      

    </section>
    
  </div>
  
  <footer class="main-footer">
    <div class="pull-right hidden-xs">
      <b>Version</b> 2.4.0
    </div>
    <strong>Copyright © 2014-2016 <a href="https://adminlte.io">Almsaeed Studio</a>.</strong> All rights
    reserved.
  </footer>

  
  <aside class="live-admin control-sidebar live-admin control-sidebar-dark">
    
    <ul class="nav nav-tabs nav-justified live-admin control-sidebar-tabs">
      <li><a href="#live-admin control-sidebar-home-tab" data-toggle="tab"><i class="pk pk-home"></i></a></li>
      <li><a href="#live-admin control-sidebar-settings-tab" data-toggle="tab"><i class="pk pk-gears"></i></a></li>
    </ul>
    
    <div class="tab-content">
      
      <div class="tab-pane" id="live-admin control-sidebar-home-tab">
        <h3 class="live-admin control-sidebar-heading">Recent Activity</h3>
        <ul class="live-admin control-sidebar-menu">
          <li>
            <a href="javascript:void(0)">
              <i class="menu-icon pk pk-birthday-cake bg-red"></i>

              <div class="menu-info">
                <h4 class="live-admin control-sidebar-subheading">Langdon's Birthday</h4>

                <p>Will be 28 on April 29th Laravel 5.6 Admin Panel Example Tutorial From Scratch</p>
              </div>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <i class="menu-icon pk pk-member bg-yellow"></i>

              <div class="menu-info">
                <h4 class="live-admin control-sidebar-subheading">Frodo Updated His Profile</h4>

                <p>New phone +1(800)555-1234</p>
              </div>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <i class="menu-icon pk pk-envelope-o bg-light-blue"></i>

              <div class="menu-info">
                <h4 class="live-admin control-sidebar-subheading">Pakainfo Joined Mailing List</h4>

                <p>[email protected]</p>
              </div>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <i class="menu-icon pk pk-file-code-o bg-green"></i>

              <div class="menu-info">
                <h4 class="live-admin control-sidebar-subheading">Cron Job 254 Executed</h4>

                <p>Execution time 5 seconds</p>
              </div>
            </a>
          </li>
        </ul>
        

        <h3 class="live-admin control-sidebar-heading">Tasks Progress</h3>
        <ul class="live-admin control-sidebar-menu">
          <li>
            <a href="javascript:void(0)">
              <h4 class="live-admin control-sidebar-subheading">
                Custom Template Design
                <span class="label label-danger pull-right">70%</span>
              </h4>

              <div class="progress progress-xxs">
                <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
              </div>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <h4 class="live-admin control-sidebar-subheading">
                Update Resume
                <span class="label label-success pull-right">95%</span>
              </h4>

              <div class="progress progress-xxs">
                <div class="progress-bar progress-bar-success" style="width: 95%"></div>
              </div>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <h4 class="live-admin control-sidebar-subheading">
                Laravel Integration
                <span class="label label-warning pull-right">50%</span>
              </h4>

              <div class="progress progress-xxs">
                <div class="progress-bar progress-bar-warning" style="width: 50%"></div>
              </div>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <h4 class="live-admin control-sidebar-subheading">
                Back End Framework
                <span class="label label-primary pull-right">68%</span>
              </h4>

              <div class="progress progress-xxs">
                <div class="progress-bar progress-bar-primary" style="width: 68%"></div>
              </div>
            </a>
          </li>
        </ul>
        

      </div>
      
      
      <div class="tab-pane" id="live-admin control-sidebar-stats-tab">Stats Tab Content</div>
      
      
      <div class="tab-pane" id="live-admin control-sidebar-settings-tab">
        <form method="post">
          <h3 class="live-admin control-sidebar-heading">General Settings</h3>

          <div class="form-group">
            <label class="live-admin control-sidebar-subheading">
              Report panel usage
              <input type="checkbox" class="pull-right" checked>
            </label>

            <p>
              Some information about this general settings option
            </p>
          </div>
          

          <div class="form-group">
            <label class="live-admin control-sidebar-subheading">
              Allow mail redirect
              <input type="checkbox" class="pull-right" checked>
            </label>

            <p>
             Laravel 5.6 Admin Panel Example Tutorial From Scratch
            </p>
          </div>
          

          <div class="form-group">
            <label class="live-admin control-sidebar-subheading">
              Expose author name in posts
              <input type="checkbox" class="pull-right" checked>
            </label>

            <p>
              Laravel 5.6 Admin Panel Example Tutorial From Scratch
            </p>
          </div>
          

          <h3 class="live-admin control-sidebar-heading">Chat Settings</h3>

          <div class="form-group">
            <label class="live-admin control-sidebar-subheading">
              Show me as online
              <input type="checkbox" class="pull-right" checked>
            </label>
          </div>
          

          <div class="form-group">
            <label class="live-admin control-sidebar-subheading">
              Turn off notifications
              <input type="checkbox" class="pull-right">
            </label>
          </div>
          

          <div class="form-group">
            <label class="live-admin control-sidebar-subheading">
              Delete chat history
              <a href="javascript:void(0)" class="text-red pull-right"><i class="pk pk-trash-o"></i></a>
            </label>
          </div>
          
        </form>
      </div>
      
    </div>
  </aside>
  
  
  <div class="live-admin control-sidebar-bg"></div>
</div>


<script src="{{asset('js/app.js')}}"></script>
</body>
</html>

Step 5: Include Custom CSS File and JS File

resources >> assets >> sass >> app.scss

// app.scss

@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");

@import "variables";

@import '~admin-lte/node_modules/bootstrap/media/css/bootstrap.min.css'; 
@import '~admin-lte/media/css/adminlte.css';
@import '~admin-lte/media/css/skins/_all-skins.css';


.navbar-laravel {
  background-color: #fff;
  card-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

resources >> assets >> js >> bootstrap.js

// bootstrap.js

window._ = require('lodash');
window.Popper = require('popper.js').default;

try {
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}

//Laravel 5.6 Admin Panel Example Tutorial From Scratch
require('admin-lte');

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

Step 5 : Define Route

web.php

Read Also:  Laravel Eloquent JOIN Multiple Tables using Query Builder

I can register main Laravel 5.6 route in a web.php file.

Route::get('laraveladminpanel', function () {
    return view('master');
});

simple run the npm run watch command in terminals.

php artisan serve

And then, We go to this URL: http://localhost:8000/laraveladminpanel

Good Luck, our simple step by step Laravel 5.6 Admin Panel Tutorial done.

Angular 6 CRUD Operations Application Tutorials

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

Read Also:  Laravel Blade Layouts Folder Structure

I hope you get an idea about Laravel 5.6 Admin Panel Example Tutorial From Scratch.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

About Pakainfo

I am Jaydeep Gondaliya, a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Pakainfo →

Leave a Reply

Your email address will not be published. Required fields are marked *