How to Integrate Admin Template in Laravel

by

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.

Here is the step-by-step guide to integrating the admin template in Laravel:

Step 1: Install the Laravel

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');

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 needed on all the pages.

Create 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.

adminlte laravel

That’s it for the Integrate Admin Template In Laravel Tutorial.

13 thoughts on “How to Integrate Admin Template in Laravel”

  1. 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

    Reply

  4. 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.

    Reply

  5. 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

    Reply

Leave a Comment

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