AppDividend
Latest Web Development Tutorials

How To Integrate Admin Template In Laravel 5.5

411

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

Related Posts
1 of 12

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

Leave A Reply

Your email address will not be published.