Laravel 8 Layouts And Views Using AdminLTE3

Last Updated: | By: PHPFlow Team

We will create laravel 8 layout and views Using AdminLTE3 Theme.This tutorial help to convert simple bootstrap HTML theme into laravel 8 layout. The layout means a theming of your laravel application. The blade template engine will use to create theme layout in laravel 8.

The Laravel is a powerful and MVC pattern based framework. Default, The Laravel store view file in /resources/views folder.

laravel8-adminlte-theme

Blade Engine

The Blade is one of them powerful templating engine in php, which will generate theme layout in HTML format. All blade files uses .blade.php file extension and stored in resources/views directory.

AdminLTE3

The AdminLTE3 is a free to use Bootstrap 4 admin template. This template uses the Bootstrap 4 styles along with a variety of powerful jQuery plugins and tools to create a powerful framework for creating admin panels or back-end dashboards.

Laravel 8 File changes

There are following files will participate into this laravel layout tutorial :

  • public : This folder will contain css, js and images folder and files.
  • resources/views : This folder will contain all views file.
  • resources/views/layouts : This folder will contain all layout files .
  • resources/views/partials : This folder will contain all layout partial files like header, footer and sidebar etc.
  • routes/web.php : This file contain web routes.
  • Http/Controllers/HomeController.php : This file contains controller method for routes.

You can also check other recommended tutorials of Lumen/Laravel :

Laravel 8 Layouts And Views

We will download HTML based AdminLTE3 theme and convert into powerful laravel layout using blade templating engine. Break the index.html page into the smaller unit like header, footer, sidebar and content, then coupled into the master layout(app.blade.php) file. Let’s create layout and render content:

Install Laravel Using Composer

There are two method to install laravel using laravel installer or composer, Let’s install Laravel by Composer command create-project. If your system doesn’t has Composer Installed, You need to install them? Run the below command to create a laravel project into the terminal-

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

Download AdminLTE Theme

First, We will download AdminLTE3 Template from Here.

Move Theme assets files

Theme have assets folder that contains css.js and images folder. We will Move all theme js, css, images and fonts folder and files into laravel-app /public folder.

Create Partials Files From HTML Theme

Already downloaded AdminLTE3 zip folder, we will extract it and open index.html file. Let’s created following separate template files. These file will have separate portion of theme adminLte index.html file –

  • /resources/views/partials/header.blade.php : This file will contains html template header part.
  • /resources/views/partials/sidebar.blade.php : This file will contains html template sidebar part.
  • /resources/views/partials/footer.blade.php : This file will contains html template footer part.
  • /resources/views/partials/breadcrumb.blade.php : This file will contains breadcrumb information.
  • /resources/views/layouts/app.blade.php : This file will use to include above partial files and create master layout template which will render on each laravel request.

header.blade.php

Created a new views/partials/header.blade.php file and paste AdminLTE theme header html code:

<nav class="main-header navbar navbar-expand navbar-white navbar-light">
    <!-- Left navbar links -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
      </li>
      <li class="nav-item d-none d-sm-inline-block">
        <a href="/" class="nav-link">Home</a>
      </li>
      <li class="nav-item d-none d-sm-inline-block">
        <a href="#" class="nav-link">Contact</a>
      </li>
    </ul>

    <!-- Right navbar links -->
    <ul class="navbar-nav ml-auto">
      <!-- Navbar Search -->
      <li class="nav-item">
        <a class="nav-link" data-widget="navbar-search" href="#" role="button">
          <i class="fas fa-search"></i>
        </a>
        <div class="navbar-search-block">
          <form class="form-inline">
            <div class="input-group input-group-sm">
              <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
              <div class="input-group-append">
                <button class="btn btn-navbar" type="submit">
                  <i class="fas fa-search"></i>
                </button>
                <button class="btn btn-navbar" type="button" data-widget="navbar-search">
                  <i class="fas fa-times"></i>
                </button>
              </div>
            </div>
          </form>
        </div>
      </li>
    </ul>
  </nav>

footer.blade.php

Created new views/partials/footer.blade.php file and paste AdminLTE theme footer HTML code.

<footer class="main-footer">
    <strong>Copyright © <script>
                        document.write(new Date().getFullYear())
                    </script> <a href="https://phpflow.com">www.phpflow.com</a>.</strong>
    All rights reserved.
    <div class="float-right d-none d-sm-inline-block">
      <b>Version</b> 3.1.0
    </div>
  </footer>

sidebar.blade.php

Created new views/partials/sidebar.blade.php file and paste AdminLTE theme sidebar HTML code.

<aside class="main-sidebar sidebar-dark-primary elevation-4">
    <!-- Brand Logo -->
    <a href="/" class="brand-link">
      <img src="assets/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8">
      <span class="brand-text font-weight-light">AdminLTE 3</span>
    </a>

    <!-- Sidebar -->
    <div class="sidebar">
      <!-- Sidebar user panel (optional) -->
      <div class="user-panel mt-3 pb-3 mb-3 d-flex">
        <div class="image">
          <img src="assets/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
        </div>
        <div class="info">
          <a href="#" class="d-block">phpflow</a>
        </div>
      </div>

      <!-- SidebarSearch Form -->
      <div class="form-inline">
        <div class="input-group" data-widget="sidebar-search">
          <input class="form-control form-control-sidebar" type="search" placeholder="Search" aria-label="Search">
          <div class="input-group-append">
            <button class="btn btn-sidebar">
              <i class="fas fa-search fa-fw"></i>
            </button>
          </div>
        </div><div class="sidebar-search-results"><div class="list-group"><a href="#" class="list-group-item"><div class="search-title"><strong class="text-light"></strong>N<strong class="text-light"></strong>o<strong class="text-light"></strong> <strong class="text-light"></strong>e<strong class="text-light"></strong>l<strong class="text-light"></strong>e<strong class="text-light"></strong>m<strong class="text-light"></strong>e<strong class="text-light"></strong>n<strong class="text-light"></strong>t<strong class="text-light"></strong> <strong class="text-light"></strong>f<strong class="text-light"></strong>o<strong class="text-light"></strong>u<strong class="text-light"></strong>n<strong class="text-light"></strong>d<strong class="text-light"></strong>!<strong class="text-light"></strong></div><div class="search-path"></div></a></div></div>
      </div>

      <!-- Sidebar Menu -->
      <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
          <!-- Add icons to the links using the .nav-icon class
               with font-awesome or any other icon font library -->
          
          <li class="nav-item">
            <a href="/" class="nav-link {{ $elementActive == 'home' ? 'active' : '' }}">
              <i class="nav-icon fas fa-home"></i>
              <p>
                Home
              </p>
            </a>
          </li>
          <li class="nav-item">
            <a href="/contact" class="nav-link  {{ $elementActive == 'contact' ? 'active' : '' }}">
            <i class="nav-icon fas fa-id-card-alt"></i>
              <p>
                Contact us
              </p>
            </a>
          </li>  
        </ul>
      </nav>
      <!-- /.sidebar-menu -->
    </div>
    <!-- /.sidebar -->
  </aside>

breadcrumb.blade.php

Created new views/partials/breadcrumb.blade.php file and paste AdminLTE theme breadcrumb HTML code.

<section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>Blank Page</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="/">Home</a></li>
              
            @foreach(Request::segments() as $segment)
            <li class="breadcrumb-item">
                <a href="{{ route('contact') }}">{{$segment}}</a>
            </li>
            @endforeach
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

HomeController.pho file

Let’s create HomeController.php file into Http/Controllers/ folders, Added below code here :

<?php
namespace App\Http\Controllers;

class HomeController extends Controller
{

    /**
     * Show the application home.
     *
     * @return \Illuminate\View\View
     */
    public function index()
    {
        return view('pages.home');
    }

    /**
     * Show the application contact.
     *
     * @return \Illuminate\View\View
     */
    public function contact()
    {
        return view('pages.contact');
    }
}

Convert Bootstrap Into Laravel Layout

Created new resources/views/layouts/app.blade.php file. Added partial files into here and create content area that will filed by routes page contents. Also, included required css and js files that will help to render theme styling. Added below codes into this file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>App Name - @yield('title')</title>

  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="{{asset('assets/css/fontawesome-free/css/all.min.css')}}" media="all">
  <!-- Theme style -->
  <link rel="stylesheet" href="{{asset('assets/css/adminlte.min.css')}}">
</head>
<body class="hold-transition sidebar-mini">
<!-- Site wrapper -->
<div class="wrapper">
  <!-- Navbar -->
  @include('layouts.partials.header')
  <!-- /.navbar -->

  <!-- Main Sidebar Container -->
  @include('layouts.partials.sidebar')
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    
    @include('layouts.partials.breadcrumb')
    <!-- Main content -->
    <section class="content">
      <!-- Default box -->
      @yield('content')
    </section>
    <!-- /.content -->
  </div>
  @include('layouts.partials.footer')
  <!-- /.content-wrapper -->
  
</div>
<!-- ./wrapper -->

<!-- jQuery -->
<script src="{{asset('assets/plugins/jquery/jquery.min.js')}}"></script>
<!-- Bootstrap 4 -->
<script src="{{asset('assets/plugins/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
<!-- AdminLTE App -->
<script src="{{asset('assets/js/adminlte.min.js') }}"></script>
<!-- AdminLTE for demo purposes -->
<script src="{{asset('assets/js/demo.js') }}"></script>
</body>
</html>

You can see above code, I am using two directives,

  • @include : This directive used to include partial files.
  • @yield : This directive used to set content into the section, which is main content area of layout.

Create A Home Page

Now, Create a home page for our laravel application and link home page menu into sidebar. This is default page view of the our laravel application.

Define home view Routes In Laravel 8

Now define routes and call above view, Let’s add below entry into the routes/web.php file.

Route::get('/', [HomeController::class, 'index']);

Define home Method into Controller

We have defined home routes and target index method under HomeController file, Let’s create index() method here :

/**
 * Show the application home.
 *
 * @return \Illuminate\View\View
 */
public function index()
{
	return view('pages.home');
}

Home view File

Let’s create a new home.blade.php file into the /views/pages folder and added below code into the this file.

@extends('layouts.app', [
    'class' => '',
    'elementActive' => 'home'
])

@section('content')
<div class="card">
        <div class="card-header">
          <h3 class="card-title">Home</h3>
          <div class="card-tools">
            <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
              <i class="fas fa-minus"></i>
            </button>
            <button type="button" class="btn btn-tool" data-card-widget="remove" title="Remove">
              <i class="fas fa-times"></i>
            </button>
          </div>
        </div>
        <div class="card-body">
          this is my home page
        </div>
        <!-- /.card-body -->
        <div class="card-footer">
          
        </div>
        <!-- /.card-footer-->
      </div>
      <!-- /.card -->
@endsection

We have extended master layout app.blade.php file and passed active class name($elementActive), This variable value get into the master layout file:

Contact Us page

Contact page is another page into this laravel 8 layout tutorial, that ll have application contact information.

Define Contact view Routes In Laravel 8

Now define routes and render contact view, Let’s add below entry into the routes/web.php file.

Route::get('/contact', [HomeController::class, 'contact'])->name('contact');

Define contact Method into Controller

We have defined contact routes and target contact method under HomeController file, Let’s create contact() method here :

/**
 * Show the application contact.
 *
 * @return \Illuminate\View\View
 */
public function contact()
{
	return view('pages.contact');
}

Above method search contact.blade.php file into pages folder.

Contact view File

Create views/pages/contact.blade.php file and added below code:

@extends('layouts.app', [
    'class' => '',
    'elementActive' => 'contact'
])

@section('content')
<div class="card">
        <div class="card-header">
          <h3 class="card-title">Contact Us</h3>

          <div class="card-tools">
            <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
              <i class="fas fa-minus"></i>
            </button>
            <button type="button" class="btn btn-tool" data-card-widget="remove" title="Remove">
              <i class="fas fa-times"></i>
            </button>
          </div>
        </div>
        <div class="card-body">
        If you have any questions, queries or suggestions regarding the content here on phpflow.com, please feel free to get in touch.

Email: phpflow(at)gmail(dot)com

        </div>
        <!-- /.card-body -->
        <div class="card-footer">
          Footer
        </div>
        <!-- /.card-footer-->
      </div>
      <!-- /.card -->
@endsection

Now run Laravel application using php artisan serve and navigate http://localhost:8000, You can get AdminLTE theme page layout with ‘this is my home page’ message.

Conclusion

We have created a laravel theme layout using AdminLTE. You can convert any HTML theme into laravel layout by helping this tutorial. You can use any other template engine as well. This laravel tutorial used bootstrap 4,blade template engine and php 7 to convert HTML view into Laravel Layout. You can get more info about laravel 8 from official laravel website.

Leave a Reply

Your email address will not be published.