If you are building a web application, then the admin panel is the most used web part. So in today’s tutorial, I will show you how to integrate any admin panel easily with Laravel. We will do it from scratch. We will use AdminLTE.
Integrate admin template in Laravel
To integrate an admin template in Laravel, download the admin panel template in plain HTML and then create a master file which is a layout file consisting of a header, content, and footer file, and then cover all the other themes files with this master file.
Step 1: Install the Laravel
Type the following command.
composer create-project laravel/laravel laraveltemplate --prefer-dist
After installation, edit the .env file and set up the database. Now, define the route for the admin template.
Route::view('admin', 'home');
Now, we need to create one master template file, which is inherited by all of its child pages.
In the resources >> views folder, make one file called master.blade.php.
Step 2: Make a layout file called master.blade.php
In this file, we will include all the css and js files, which will be needed in all the pages.
Now, make one folder inside the views directory, called partials. In that folder, we will put our header and sidebar files. Our master.blade.php file looks like this.
<!-- master.blade.php -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>@yield('title')</title>
<link rel="stylesheet" href="{{asset('css/app.css')}}" />
<link rel="stylesheet" href="{{asset('css/AdminLTE.min.css')}}" />
<link rel="stylesheet" href="{{asset('css/skins/_all-skins.min.css')}}" />
<link rel="stylesheet" href="{{asset('font-awesome/css/font-awesome.min.css')}}" />
@yield('stylesheets')
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
@include('partials.header')
@include('partials.sidebar')
@yield('content')
</div>
<script src="{{ asset('js/jquery/dist/jquery.min.js') }}"></script>
<script src="{{ asset('js/bootstrap/dist/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('js/adminlte.min.js') }}"></script>
@yield('scripts')
</body>
</html>
This file includes the required CSS and JS that will run the theme smoothly throughout the project.
Our header.js file looks like this.
<!-- header.blade.php -->
<header class="main-header">
<a href="" 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 user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="{{asset('img/user2-160x160.jpg')}}" class="user-image" alt="User Image" />
<span class="hidden-xs">AppDividend</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header">
<img src="{{asset('img/user2-160x160.jpg')}}" class="img-circle" alt="User Image" />
<p>
AppDividend
</p>
</li>
<li class="user-footer">
<div class="pull-right">
<a href="" class="btn btn-default">Sign out</a>
</div>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
Also, the sidebar.blade.php file looks like this.
<!-- sidebar.blade.php -->
<aside class="main-sidebar">
<section class="sidebar">
<div class="user-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>AppDividend</p>
</div>
</div>
<ul class="sidebar-menu" data-widget="tree">
<li class="treeview">
<a href="#">
<i class="fa fa-dashboard"></i> <span>Categories</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><a href=""><i class="fa fa-circle-o"></i>Add Category</a></li>
<li><a href=""><i class="fa fa-circle-o"></i>All Categories</a></li>
</ul>
</li>
</ul>
</section>
</aside>
If you have included the proper css and js files, then hit the following URL in the browser.
http://localhost:8000/admin
Remember, you need to start the laravel development server.
Conclusion
You can further modify the theme by dividing it into smaller dynamic pieces as per your requirement. This is just a demo. Our theme looks like this.
That’s it for the Integrate Admin Template In Laravel Tutorial.
Greetings.
i am new to laravel and i have followed your tutorials to the end, but when i start the server and launch the app, the original laravel start page is what shows.
what should i do
Route::view(‘admin’, ‘home’);
You need to go to http://localhost:8000/admin route to get the admin view.
View [home] not found.
Good article, excellent thanks
Hi, Does anyone know how reference css and JS with id in the URL?
let me explain. my assets folder is in /public and it works on any page when http://127.0.0.1:8000/register is loaded but it is not working when I click on a user that has the id in the URL http://127.0.0.1:8000/user/id or any page i put like http://127.0.0.1:8000/car/create. Your help will very appreciated. Thanks
Am experincing a very serious challege.
Am working on web app.
I have a parent view, where children are inheriting it.
Am new in laravel.
I have this form that when i view within the parent view its fine, but when i try to post some data for saving nothing is happening.
If i do away with the parent view its saving very well.
what could be the problem?
Somebody help.
hello dear
i do step by step in laravel 5.6 but not show me laravel adminLTE , only show default template why ?
not work in laravel 5.6 ?
Thank you
how to download/integrate the admin panel template in the plain HTML,
how to do??.. download or integrate the admin panel template in the plain HTML .. please anyone tell me
Nice Article..
I am creating website using laravel with firebase. Is it possible to generate admin panel like this?
can it integerate with laravel 6.0
http://localhost:8000/admin
reuslt :
home not found
how do you fix this ?