AppDividend
Latest Code Tutorials

How To Integrate Admin Template In Laravel 5.5

16,039

Get real time updates directly on you device, subscribe now.

How to integrate admin template in Laravel 5.5 is today’s leading topic. If you are building a web application, then 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 the Laravel. We will do it from scratch. We will use AdminLTE.

Integrate admin template in Laravel 5.5

First, we will download the admin panel template in the plain HTML, and then we will download the Laravel 5.5.

Step 1: Install the Laravel 5.5

Type the following command.

composer create-project laravel/laravel laraveltemplate --prefer-dist

After installation, edit the .env file and setup 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 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 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, 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>

Now, if you have included the proper css and js files, then hit the following URL in the browser.

http://localhost:8000/admin

Remeber, you need to start the laravel development server.

Conclusion

You can further modify the theme by dividing into smaller dynamic pieces as per your requirement. This is just a demo. Our theme looks like this.

 

adminlte laravel

8 Comments
  1. Sadick says

    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

    1. Krunal says

      Route::view(‘admin’, ‘home’);

      You need to go to http://localhost:8000/admin route to get the admin view.

  2. Elivar Largo says

    Good article, excellent thanks

  3. Reggie says

    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

  4. john says

    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.

  5. Obka says

    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

  6. ravi says

    how to download/integrate the admin panel template in the plain HTML,

  7. ravi says

    how to do??.. download or integrate the admin panel template in the plain HTML .. please anyone tell me

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.